#codecanbefun

Animation with Greensock

I'm especially interested in a website with beautiful moving effects rather than all elements being static. I tried using @keyframe to create some simple movements, but I found the results to be not very nice, and also quite time consuming to calculate these movements correctly. So, I researched some other alternatives, and I found Greensock

Here I will briefly introduce Greensock, and will give some examples to make it easier for everyone to imagine.

Overview of GreenSock

GreenSock is a powerful web animation platform that allows you to animate nearly any DOM element property, CSS value, canvas object, and more. https://greensock.com/gsap/

GreenSock has 4 main tools:

TweenLite Used to animate properties with numeric values such as width, height. With CSSplugin you can animate any css elements like backgroundColor, fontSize. TweenLite is good for simple effects with a few elements. TimelineLite Includes multiple effects or timelines like pause, reverse, restart, speed up, slow down, etc. TimelineLite for creating chronological effects TimelineMax Added functions like repeat, yoyo, etc. Used to create advanced effects in chronological order. TweenMax Includes all the above features, plus some functions like delay, stagger individual tweens or timelines. TweenMax is the most powerful effects tool.

In this article, I will demo with TweenLite. First, we need to download TweenLite from Greensock's website first, click Download button, select Customize option, copy and paste two CDN links (TweenLite.min.js and CSSPlugin.min.js) at the end of your html, just before the closing body tag.

Let's start HTML, inside the body we add 1 parent div tag #box and 2 child div tags .boxSmall

In CSS, add some properties to center the viewport.

Now you can see the square in the center of the screen like this.

To be able to move elements on the page with TweenLite, first we need to create a variable to select the correct element by classname or id.

Now we will move this square to the left of the screen with the function .to()

It moves from the position we specified in the css (left: 50%) to the position defined by the .to() function in Tweenlite (left: 0).

But there is a problem that only half of the square shows up. Because in css we define transform: translate(–50%, –50%) and this css still applies to $box. We need to add the x value after the left in the tween so we can see the whole square.

Now the square has moved to the right position left: 0 that we want.

You see, so with just a few simple lines of code, we have created a beautiful motion effect.

However, to make the animations smoother and more natural, we need easing. TweenLite has several standard eases: Power0 is similar to Linear Power1 is similar to Quad Power2 is similar to Cubic Power3 is similar to Quart Power4 is similar to Quint