• Monday , 25 March 2019

Javascript Scroll Animation Tutorial | GSAP and ScrollMagic Tutorial

Code Canyon



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

3d Ocean

Related Posts

26 Comments

  1. The8XGaming
    March 13, 2019 at 03:46

    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.

  2. Ojasvi Singh 786
    March 13, 2019 at 03:46

    ๐Ÿ‘๐Ÿ‘๐Ÿ‘๐Ÿ‘

  3. Jessica Desjardins
    March 13, 2019 at 03:46

    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

  4. Handmakerz HM
    March 13, 2019 at 03:46

    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.๐Ÿ‘๐Ÿ’ฏ

  5. Nolan Dwyer
    March 13, 2019 at 03:46

    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!

  6. Tuแบฅn Lรช
    March 13, 2019 at 03:46

    What's your Vscode theme ? Looks clean and modern :v

  7. zihui Li
    March 13, 2019 at 03:46

    thank you so much!

  8. Mahmoud Ahmed
    March 13, 2019 at 03:46

    is this responsive?

  9. Yong Yee AhSoh
    March 13, 2019 at 03:46

    hi Ed, how to display"none" or remove the "start" && "trigger 1" word on the screen?

  10. Jamie Fuller
    March 13, 2019 at 03:46

    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

  11. Dmitriy Oktyabrskiy
    March 13, 2019 at 03:46

    Ed, what do you think about taking a custom audio tag in future? ๐Ÿ™‚

  12. Isaac Lucas
    March 13, 2019 at 03:46

    * Drop da Sub **

  13. Malevati D
    March 13, 2019 at 03:46

    You're very good! Can you make a video on this function using a 3D model?

  14. Reggio
    March 13, 2019 at 03:46

    Just another cool and well explained video ! Little channel but big man ! Thanks for sharing your knowledge. Give that man a beer ! Merci beaucoup ๐Ÿ˜‰

  15. Alex Galkin
    March 13, 2019 at 03:46

    favorite dev channel by far.

  16. Radan Mitasik
    March 13, 2019 at 03:46

    i really i appreciate your work and effort am sure you are helping to many .. ๐Ÿ™‚

  17. Mikhial Da Silva
    March 13, 2019 at 03:46

    Thanks man Great tutorial GG EZ!!! Haha

  18. lionel8795
    March 13, 2019 at 03:46

    What's the name of that absolutely beautiful VSCode theme?

  19. Sergey Belous
    March 13, 2019 at 03:46

    Nice! Thank you

  20. Yornalys Estrella Polanco
    March 13, 2019 at 03:46

    Hey, maybe you know how make a splash where the page is open by the first time

  21. Kevin Tran
    March 13, 2019 at 03:46

    Whoah this is really sick! Thanks dude! It's really hard finding videos like these on youtube.

  22. Jaime Rios
    March 13, 2019 at 03:46

    it's amazing how make it seem so easy to use this animation libraries, good job and many thanks for the good content Ed. ๐Ÿ‘

  23. Mayur Shah
    March 13, 2019 at 03:46

    Amazing content as always.

  24. Dmitriy Oktyabrskiy
    March 13, 2019 at 03:46

    Jesus! Youโ€™re unstoppable, dude ๐Ÿ™‚
    Keep going

  25. TEpKV4Om75tjd1b Z8kMpPy84EHp6dV
    March 13, 2019 at 03:46

    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.

  26. Dev Ed
    March 13, 2019 at 03:46

    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 ๐Ÿ˜€

Leave A Comment

You must be logged in to post a comment.