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.
π Materials used in this video:
Images in the video: https://www.dropbox.com/s/xtp0xrvij2y5nxy/paper.png?dl=0
GSAP:
https://cdnjs.com/libraries/gsap
Scrollmagic:
https://cdnjs.com/libraries/ScrollMagic
π΄ Follow me on:
Twitter: https://twitter.com/deved94
Github: https://github.com/DevEdwin
π΅ Music:
Outro:
LAKEY INSPIRED – Me 2 (Feat. Julian Avila)
Music By: https://soundcloud.com/lakeyinspired
Intro:
Dj Quads
Track Name: “Every Morning”
Music By: Dj Quads @ https://soundcloud.com/aka-dj-quads
Creative Commons β Attribution-ShareAlike 3.0 Unportedβ CC BY-SA 3.0
http://creativecommons.org/licenses/b…
Original source
26 responses to “Javascript Scroll Animation Tutorial | GSAP and ScrollMagic Tutorial”
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.
ππππ
Can you do a tutorial on creating a smooth, virtual scroll effect with smooth-scrollbar.js? Iβm having trouble implementing it and I love your creative tutorials. Thanks! https://github.com/idiotWu/smooth-scrollbar/blob/develop/README.md
Love the scroll animation.πThese vΓdeos help me alot. Much thanks.ππ―The resources you provide is unique and valuable also.πThe way you work with those librarys I have a feeling you really gone close the show with something far out, while continuing to show out.πππI like the mascot ED.π The REAL dev ED and ED.ππ May you both keep Up the good work.ππ―
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!
What's your Vscode theme ? Looks clean and modern :v
thank you so much!
is this responsive?
hi Ed, how to display"none" or remove the "start" && "trigger 1" word on the screen?
For anyone interested you can get the original code here: http://scrollmagic.io/examples/expert/bezier_path_animation.html – click view source.
For someone who's channel's slogan is "get creative" you probably shouldn't rip code off and change it slightly then claim as your own idea. Or at least credit the scrollmagic examples site
Ed, what do you think about taking a custom audio tag in future? π
* Drop da Sub **
You're very good! Can you make a video on this function using a 3D model?
Just another cool and well explained video ! Little channel but big man ! Thanks for sharing your knowledge. Give that man a beer ! Merci beaucoup π
favorite dev channel by far.
i really i appreciate your work and effort am sure you are helping to many .. π
Thanks man Great tutorial GG EZ!!! Haha
What's the name of that absolutely beautiful VSCode theme?
Nice! Thank you
Hey, maybe you know how make a splash where the page is open by the first time
Whoah this is really sick! Thanks dude! It's really hard finding videos like these on youtube.
it's amazing how make it seem so easy to use this animation libraries, good job and many thanks for the good content Ed. π
Amazing content as always.
Jesus! Youβre unstoppable, dude π
Keep going
You're very cool, just don't throw the channel. I do not understand half of the language, but that does not prevent me to watch you and learn new things. Hello from Russia.
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 π