Check out my courses and become more creative!
https://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!
https://www.patreon.com/dev_ed

Microphones I Use
Audio-Technica AT2020 - https://geni.us/Re78 (Amazon)
Deity V-Mic D3 Pro - https://geni.us/y0HjQbz (Amazon)
BEHRINGER Audio Interface - https://geni.us/AcbCpd9 (Amazon)

Camera Gear
Fujifilm X-T3 - https://geni.us/7IM1 (Amazon)
Fujinon XF18-55mmF2.8…

Learn how to use anime.js to create mesmerizing animation on your web pages.

So in this final part of this series of tutorials, you will learn about callback functions that execute some code depending on the situation (at the start or at the end of the animation for example).

You will also learn about helpers and most importantly, the way to use this library to animate SVG elements on the document.
---
Article
https://waelyasmina.com/anime-js-tutorial-a-complete-guide-to-the-library/
---
requestAnimationFrame article
https://css-tricks.com/using-requestanimationframe/
---
Song
––––––––––––––––––––––––––––––
Coming Home by LiQWYD & Dayfox
https://soundcloud.com/liqwyd
https://soundcloud.com/dayfox
Creative Commons — Attribution 3.0 Unported — CC BY 3.0
Free Download / Stream: https://bit.ly/_coming-home
Music promoted by Audio Library https://youtu.be/s62mBX_0TdA
––––––––––––––––––––––––––––––

Javascript Circular Slider. Contribute to MougLee/circular-slider development by creating an account on GitHub.

PixiJS - The HTML5 Creation Engine. Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.