The trend of web animations started with GIF animations and at that time it was the easiest way of implementing animations on the web.
But, the problem with GIF is that it doesn’t have variable transparency and doesn’t support an alpha channel. Therefore, all pixels are either fully opaque or completely transparent.
The dawn of flash web animations
After the GIFs, came Flash web animations which brought new capabilities, like animations with sound and interactivity.
But there is a downside to this approach as well.
1.) This approach requires a flash plugin installed on the browser to run.
2.) It doesn’t run well on mobile devices.
Web animation today
Today, we have different needs for web animations. The animation should be smooth, light, interactive, and ought to work on all devices.
Why animations are important for the user experience?
Web animation can engage and hold people’s attention longer than a static web page and help communicate an idea or concept more clearly and effectively. Excellent web animation conveys a story behind every bit of movement. It’s all about bringing animation to life with meaning and “soul”.
Web animation should be smooth, meaningful, and support the visitor’s journey. The web designer/animator needs to be aware of how the animation fits into the user experience, try to predict likely user flows, and then support it in a meaningful way.
GSAP + ScrollMagic Animation – VanillaJs
This blog is for all those UI developers who saw those elegant and cool SVG/UI animations online and wondered– what is this crazy shit? How can I implement this in my code?
Well, don’t worry, this article will help you with that.
In this blog, we will discuss & learn about the two powerful animation libraries, GSAP (Greensock Animation API) & ScrollMagic. With the help of these two libraries, one can create complex (yet elegant) animations.
So let’s start right away. We will create a sushi animation that will help us understand the working of GSAP & Scrollmagic.
Steps that we will be following:
- File/Folder structure for Sushi animation project
- Include GSAP in your project
- Include ScrollMagic in your project
- Intro to GSAP & its usage in the project
- Intro to ScrollMagic & its usage in the project
- Create a new folder with the name sushi-animation. Then create index.html, main.js, styles.css files inside the sushi animation folder.
- Copy & paste below code in your index.html file.
- Copy & paste below code in your styles.css
- Copy the SVG code from sushi-animation.svg file& paste it inside sushi-animation div.
Include GSAP in your project
Add GSAP CDN link in your project
Include ScrollMagic in your project
Add ScrollMagic CDN link in your project
GSAP & its usage in the project
Greensock Animation Platform(GSAP) is a JS library from which you can create seamless & custom configurable animations for your web-based products.
What is the timeline in GSAP?
Timeline manages the sequencing & timing of the events in an efficient way by acting as a container for tweens & other timelines.
Create GSAP timeline with default options.
What are tweens in GSAP?
A tween provides a single movement in animation.
Now, we have to add tweens in our GSAP timeline
Use GSAP in Sushi Animation Project
At this point, your sushi is ready with GSAP Animation.
If you want to play your animation infinitely then you can add repeat: -1 parallel to the default options in the timeline.
But it’s not over yet, we have one more thing to do 😉
Yes, now we are going to implement ScrollMagic on GSAP.
Now you must be wondering what ScrollMagic is and why we are using it ??
ScrollMagic & its usage in the project
Sounds interesting, huh?
Usage in Sushi Animation Project
Finally, your Sushi is ready 😋.
Now can cook delicious sushi by just scrolling into the browser.
Want to implement these libraries in your ReactJs & Angular Project?
You will find the source code below: