Javascript Scroll Animation Tutorial | GSAP and ScrollMagic Tutorial
HTML-код
- Опубликовано: 6 авг 2024
- Check out my courses and become more creative!
developedbyed.com
Javascript Scroll Animation Tutorial | GSAP and ScrollMagic Tutorial
Today we are going to create a cool javascript scroll animation by creatng a paper plane flying on the screen.
We are going to be using a few libraries, GSAP TweenLite will be used to take care of animating different properties of the image, bazier plugin will be used to create a path for the image to follow along. TimelineLite can be used to sequence together multiple animation and ScrollMagic will help us animate based on scroll.
This video is made for people who are interested in learning to create javascript scroll animations.
❤Become a patreon for exclusive videos and more!
/ dev_ed
Microphones I Use
Audio-Technica AT2020 - geni.us/Re78 (Amazon)
Deity V-Mic D3 Pro - geni.us/y0HjQbz (Amazon)
BEHRINGER Audio Interface - geni.us/AcbCpd9 (Amazon)
Camera Gear
Fujifilm X-T3 - geni.us/7IM1 (Amazon)
Fujinon XF18-55mmF2.8-4 - geni.us/sztaN (Amazon)
PC Specs
Kingston SQ500S37/480G 480GB - geni.us/s7HWm (Amazon)
Gigabyte GeForce RTX 2070 - geni.us/uRw71gN (Amazon)
AMD Ryzen 7 2700X - geni.us/NaBSC (Amazon)
Corsair Vengeance LPX 16GB - geni.us/JDqK1KK (Amazon)
ASRock B450M PRO4 - geni.us/YAtI (Amazon)
DeepCool ATX Mid Tower - geni.us/U8xJY (Amazon)
Dell Ultrasharp U2718Q 27-Inch 4K - geni.us/kXHE (Amazon)
Dell Ultra Sharp LED-Lit Monitor 25 2k - geni.us/bilekX (Amazon)
Logitech G305 - geni.us/PIjyn (Amazon)
Logitech MX Keys Advanced - geni.us/YBsCVX0 (Amazon)
DISCLAIMERS:
I am a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for us to earn fees by linking to Amazon.com and affiliated sites.
📔 Materials used in this video:
Images in the video: www.dropbox.com/s/xtp0xrvij2y...
GSAP:
cdnjs.com/libraries/gsap
Scrollmagic:
cdnjs.com/libraries/ScrollMagic
🛴 Follow me on:
Twitter: / deved94
Github: github.com/DevEdwin
🎵 Music:
Outro:
LAKEY INSPIRED - Me 2 (Feat. Julian Avila)
Music By: / lakeyinspired
Intro:
Dj Quads
Track Name: "Every Morning"
Music By: Dj Quads @ / aka-dj-quads
Creative Commons - Attribution-ShareAlike 3.0 Unported- CC BY-SA 3.0
creativecommons.org/licenses/b... 
Наука
hey i like your videos very much . I think you should have at least 1 million subs. Thank you for making this great videos bro.
Wow that's a huge compliment ... Thank you very much! I am happy with 2k as well haha
@@developedbyed well i am also happy with your videos .
This man deserves more that all sponsored guys who carries just about getting likes and money. Here we can feel a real and authentic sympathy
When I first saw this dude's videos I was like he's bound to make 6 figures one day if he keeps up with this!
@@developedbyed now you're on 767k. we're going for a million.
Where is my VIP SQUAD?
Hope you like the animations and other things I added in the video. I will try to up the production slowly :D
Im here 😎
Hi. I'm into 3D design lately and this is one the best scroll animation I've seen ever dogstudio.co/ can you PLEASE do a tutorial on how to animate while scrolling 3D objects? it can be any 3D object, PLEASE :)
@@trepke2849 website looks freaking cool... any idea how to implement it?
@@sagarjasani7622 no idea at all. I even tried to animate 3D motion and then do the video scroll effect - but it's not cool as this one....
Really great tutorial, man! Saved me.
Would love an updated tutorial with GSAP 3 since it's entirely different and way more confusing.
So good. Another great vid! This was insanely fun to work on. Keep up the great work!
Hi, Ed, you're the master of web animation. Your tutorial is great! Thanks.
Your videos are fantastic! Thank you for the time you time you put into them!
Another great tutorial, I really like the way you experiment with animations!!!
Love how positive you are! More animation tutorials please! :))
More on the way!
OMG this is the first video of your that I see and I'm tuned with your channel.
Thanks!!
Love it! Great job, great tutorial! keep going bro! Greetings from Argentina!
Just another cool and well explained video ! Little channel but big man ! Thanks for sharing your knowledge. Give that man a beer ! Merci beaucoup ;)
been searching for a video on this type of thing. thanks for the help. love the vids
Amazing content as always.
favorite dev channel by far.
you are great at translating hefty javascript coding(at least for this creative director!) into a creative exercise. thank you!
your amazing bro.. youve helped me a lot ,my teachers dont teach me that well .So happy i found your channel
Searching bezeir from last 5 days and finally i found out your video .... Thanks for sharing great explanation
Thanks for the Tutorial Man! Just want I needed
Jesus! You’re unstoppable, dude :)
Keep going
Good job man. Thanks for making this vids for begginers like me. Cheers from Lisbon
wow thanks a lot Ed this video really helps
my new favourite tutorials on youtube !!!
thanks so much!
Amazing viideoooo, THANK YOUUUU
!
AAAAaaaAA thank you man! It was so helpful for my project!
this was a great tutorial, thanks alot
great video, thanks a lot!
Thank you very much for this tutorial!
you just brought comedy to the geek zone..love it
You earned a sub at first sight!
This is everything 😍
Thanks for the video! Cheers! 🍻
Ive just implement your animation to my bootcamp project DevEd! :D Thank you very much bro :) Also ive just su you chanell :D
U just earned a subscription dude. Good work
Awesome man
thank you very much for this tutorial. very helpful
It´s great, thanks!!!
Nice! Thank you
Fantabulous videos!
klicked like after 5 seconds because you're presenting with such a nice vibe :))
Thank you! you're the best
What a great video.
im learning alot
this made my heart happy 😄
this is great, thx man!:)
i really i appreciate your work and effort am sure you are helping to many .. :-)
terrific energy
Very nice, thanks
Thank you sooo much you're such a life saver!!! 💖💖💖
@Kaya Ramirez did it work?
Nice video. Thanks
Thanks a lot!
thank you!
thank you so much!
THANKS!
great vid
i really love your videos.. awesome
дякувати богу що я знайшов цей канал)
this video is awesome
Man, your videos are great! This is some quality content. I'm glad I found your channel and I could subscribe to it! :D
Also, I would like to make a suggestion \ ask for two topics I'm really interested in and you could do on some future videos if you haven't yet:
1. Responsive megaMenu: most of the megamenus out there look super bad on mobile devices (except for those you have to pay for, like Jet Megamenu Plugin) or they are not responsive at all. I haven´t watched any good tutorial about this specific topic here on youtube.
2. Responsive and touch enabled slider / carousel.
Well, those videos would be helpful. Besides that and again, thanks for the great content you're putting out. I really really like this channel, probably one of the bests in existence for front-end web developers right now.
omg you are fantastic
I used to be sick of CSS, this guy made me fell in love. Am now a guru!!!
Thanks man Great tutorial GG EZ!!! Haha
hey, I like your videos very much Thank you for making this great videos bro. 👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏
Supper. thanks. More lessons with gsap 3 )))
Hello DevEd I am a student in his final year creating my portfolio website. I used you’re tutorial for the typing animation and I love it! I am struggling with creating a full screen scroll for my website and would much appreciated a tutorial on it!
Thank you for the great content!
Have it on my list! Will be coming up in the next few weeks!
nice
Hi! Firsti of all thank you so much for this tutorial, it was very usefull to me! Secondly I would like to ask you if there is any possibility to change the image style like the opacity, at the same time while scrolling
Здорово!
Do you know if it's possible to use percentages in the X & Y values? To optimize it a little
style I downloaded the demo to soft soft yesterday, and I'm going to learn from you to make my own stuff, and I wanted to leave tNice tutorials
Don't know why but i got and error message and the scrolling would not work, until i put the gsap script first (including gsap plugins), followed by ScrollMagic.min.js and then the ScrollMagic plugins! All is now golden. Thanks Ed for sharing your knowledge.
Great tutorial. Any pros/cons to using ScrollMagic versus Animate on Scroll (AOS)? I feel like AOS is lighter and as equally customizable without all the bloat. Your thoughts?
thanks for the tutorial! btw, you might need to update the video to work for GSAP 3! :)
+
Awesome vid bud! I can't get this to work with gsap 3 tho :(
I love you.
Hi there sir ed .. i love your channel.. does your bundle course is still available by the end of may?
Brother your rock star. but make more videos. Means GSAP other 2 animation type in details. thanks you for making this type of video.
very nice tutorial
the only thing is that the duration in your scrollmagic object is not about time,
it defines the distance between the start and end of the element
set it to 100% and it will start at the beginning and finish at the end
sorry for bad explanation, just test it and you will figure it out
i have a question
after the animation ends we still need to scroll through our section, how can we get it ends at the same time with our animation?
Are you planning to create a ScrollMagic and GSAP 3 ( it´s more amazing ) tutorial?
+
+1
thanks for ur sharing video…
u make scrolling animation easlier… 👍
superly done video! Does Bezier take co-ordinates for an absolute element relative to it's parent? Been trying % based values and it's throwing errors.
Great video! For you what is the best way to disable this on mobile for example?, i mean, not execute script. Thank you!
hello, ty dude, i needed this video
and this trigger text waana be show to everyone ?
hello! vh is relative? and how can i relate vh and px? In my project, i use px for photo's width and height.
Hi Ed Quick question,
I had to add the document.addEventListener("DOMContentLoaded", function(event) {}) function and add the code inside that for it to work...why does yours work without it?
Hi Dev...thank you so much for your Tuts. I'm beginner .... is there any maximum limitation to add JS ..as far I know it will slowing down our page to load ?
Hi, can you update the libraries? They are deprecated. Of course I'm trying to update myself but I keep getting errors I don't understand. Thank you for all of your tutorials!
iam iranian .... very nice
hey i tried this program it is saying timelinelite is not defined ....please help bro what to d?
Nice tutorial. But I got a problem with plugging "Cannot read property 'length' of undefined with BezierPlugin.min.js:12 " .What's the error?
Is there a way to get rid of the empty 100vh portion of animation section after plane goes out of sight?
can you do this with just vanilla js?
this is my first coding question, just started a few weeks ago. Correction my first online question post.
Nice work 👍
Is it possible to do the same thing without libraries GSAP and ScrollMagic
just CSS + Js
Hey @developedbyed, Please could you do a 2022 updated version of this? TweenLite, CSSPlugin & BezierPlugin don't exitst in latest version of gsap library!!
You're very good! Can you make a video on this function using a 3D model?
We will cover 3d in the neat future!
@@developedbyed Awesome!
great video! what do you use for Live-Server in VSC?
Probably the "Live Server" Plugin wich you can find in the "Extensions" area (squared icon on the left) :-)
How de I make the triggers text invisible?
Hi great video but, I have a question how could you remove the trigger, end and start text on the right side?
Just remove .addIndicators()
Hi Ed I need help on trigger Elements what if i have multiple elements inside .animation section and i want to create one scene but to all triggerElememts
I liked because of that pun
awesome tut! now anybody have a tut to add animation to multiple paper airplanes?
Hello
Where you getting the gasap plugins CDN.
TimeLineMAX etc