{{announcement.body}}
{{announcement.title}}

The Modern Way to Implement Animations on the Web Using GSAP and ScrollMagic

DZone 's Guide to

The Modern Way to Implement Animations on the Web Using GSAP and ScrollMagic

In this article, see a tutorial on how to implement animations on the web using GSAP and ScrollMagic.

· Web Dev Zone ·
Free Resource

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.

For that, HTML5, CSS3, JavaScript, and SVG (scalable graphics) seem to be the best solution (for web animation). Using these modern web technologies and languages will help tackle most, but not all, of the above problems.

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.

CodeSandbox link: https://codesandbox.io/s/sushi-animation-vanilla-js-2pcei?fontsize=14&hidenavigation=1&theme=dark

Steps That We Will Be Following:

  1. File/Folder structure for Sushi animation project
  2. Include GSAP in your project
  3. Include ScrollMagic in your project
  4. Intro to GSAP & its usage in the project
  5. Intro to ScrollMagic & its usage in the project

File/Folder Structure

  1. Create a new folder with the name sushi-animation. Then create index.html, main.js, styles.css files inside the sushi animation folder.
  2. Copy & paste below code in your index.html file.
Java


3. Copy and paste the below code in your styles.css

Java


4. Copy the SVG code from sushi-animation.svg file& paste it inside sushi-animation div.

Java


Include GSAP in Your Project

Add GSAP CDN link in your project

Java


Include ScrollMagic in Your Project

Add ScrollMagic CDN link in your project

Java


GSAP and 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.

Java


What Are Tweens in GSAP?

A tween provides a single movement in animation.

Java


Now, we have to add tweens in our GSAP timeline

Use GSAP in Sushi Animation Project

Java


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.

Java


But it’s not over yet, we have one more thing to do

Remember ScrollMagic??

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 and Its Usage in the Project

ScrollMagic is a Javascript library that plays animations on scroll or scrollbar.

Sounds interesting, huh?

Usage in Sushi Animation Project

Java


Finally, your Sushi is ready.

Now can cook delicious sushi by just scrolling into the browser.

CodeSandbox Link:- (https://codesandbox.io/s/sushi-animation-vanilla-js-2pcei?fontsize=14&hidenavigation=1&theme=dark)

Reference Links

Want to implement these libraries in your ReactJs & Angular Project?

You will find the source code below:

ReactJs – https://github.com/Personal-Practise-Projects/43-Animations/tree/master/03-ReactJs

Angular – https://github.com/Personal-Practise-Projects/43-Animations/tree/master/02-Angular

Topics:
animation, gsap, scrollmagic, tutorial, web animations, web dev

Published at DZone with permission of Akshay Jain . See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}