TAG: TweenMax

DailyGit is a web development blog that talk about the best web technologies and techniques useful to learn JavaScript, PHP, HTML5, CSS3 and much more in the right way.

TweenMax tips: play(), pause(), reverse() and more with TimelineMax() animations

Some days ago I've talked about TimelineMax, a simple but powerful tool offered by TweenMax library useful to create stunning animations with a "timeline approach".

Today I want to talk about some more functionalities that this class provides us, tips that could help you to have more control on your animations like a master. Let's start!


paused: true param

As I explained before, a TimelineMax instance is a container for your tweens and it simply start to run when you declare it and add tweens to it. Sometimes you just want to declare the timeline but don't autostart it, maybe because this TimelineMax instance is self-generated by a functions or because you want to wait before launch it. In this

TweenMax tips: beautiful animations with TimelineMax()

Let's go with another post about one of my favourite friends in the JavaScript family: TweenMax.

When I'm coding animations on web-apps, the most important goal of my job is try to give the more smoothness I can to the composition. Like I said in the previous posts of the TweenMax tips saga, GSAP is for sure one of the most helpful tool out of here.

Today I want to talk about a beautiful class offered by it: TimelineMax, the big brother of TimelineLite, the basic class for animated timelines. In simple words, a container for your tweens.

Like explained on the official website:

TimelineLite is a lightweight, intuitive timeline class for building and managing sequences of TweenLite, TweenMax, TimelineLite,

TweenMax tips: the important of .killTweensOf()

Here we are with a new post about TweenMax, a powerful tool that I love to use to create beautiful and smooth animations on my webpages.

Today we are gonna talk about a very useful method to stop your timeline, situation that can occurs when you need to launch a new transition but another one is running: .killTweensOf().

First of all: why I need to stop a transition? Simple. Sometimes you need to animate something that is already animating, touching the same properties. To avoid stupid bounce effects, to keep your timeline more clean as you can, to let TweenMax work in the best way as possibile is a good practice to kill running tweens.

The code is very simple:

TweenMax tips: .to() and .staggerTo() instructions

One of my favourite JavaScript library is TweenMax, part of GSAP family at GreenSock, a powerful tool for web animations with incredible fast performance, really good workflow and a perfect browser compatibility: in other words, the best friend for you fancy animations.

TweenMax easily animates every CSS property, works with GPU acceleration, uses 3D transform on modern browser to boost performance with a 2D fallback for older browsers, provides an easing tool to improve movements and much more.

Here you can find a nice post about why GSAP rocks!

Two of the most used instructions for me are .to() and .staggerTo(), two methods for create stunning animation with few lines of code.


.to()

The .to() instruction is something similar to