Javascript Scroll Animation Tutorial | GSAP and ScrollMagic Tutorial




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”

  1. 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.πŸ‘πŸ’―

  2. 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!

Leave a Reply