Jump to content
Search Community

Arranging looped animations in master time line

skurrilewelt test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts


I'm new to gsap and playing around with grouping animations. I'm struggeling with following:

var mtl = new TimelineLite();

function hufPerspective () {
	var sentence = Huf.html().split("");
	var tl = new TimelineMax({repeat:1, repeatDelay:2, yoyo:true}); 

	TweenLite.set(Huf, {css:{perspective:500, perspectiveOrigin:"50% 50%", transformStyle:"preserve-3d"}});
	$.each(sentence, function(index, val) {
		if(val === " ") {
			val = " ";			
		var letter = $("<span/>", {id : "txt" + index}).html(val).appendTo(Huf);
	   	tl.to(letter, 1, {autoAlpha:1, ease:Back.easeOut,  rotationX:360, transformOrigin:"50% 50% -20"}, index * 0.05);
	return tl;


I can't this getting run. If I remove the 'return' the animation plays as expected, but with the retunr nothing happens. What is my mistake?


Thanks. Olaf

Link to comment
Share on other sites

Hmmm, I guess it could be related to trying to add a TimelineMax (tl) into a
TimelineLite (mtl)? The reverse definitely works, but TimelineLite doesn't support stuff like repeat and yoyo so I suppose that might cause a conflict?

Sorry if that's not the answer but I gotta run and just thought I'd chime in with what was on the top of my head.

  • Like 1
Link to comment
Share on other sites

yes i second Jamies advice.. if you are including TweenMax.js in your webs page.. than it is always best to be consistent, and use TweenMax any time you are creating your tweens, since that is the library you are using..


so try and convert all TweenLite to TweenMax..


also if you could provide a codepen or jsfiddle example we can better help you :)

Link to comment
Share on other sites

Just to clarify, it is perfectly acceptable to mix the use of TimelineLite and TimelineMax and TweenLite and TweenMax. In fact, I recommend it. Technically the rendering code in the *Lite classes is a tiny bit faster than the *Max counterparts because they don't have to support the extra features like repeat, yoyo, and repeatDelay. So when I build stuff, I almost always use TweenLite and TimelineLite except for particular scenarios when I need a TweenMax or TimelineMax feature that isn't available in its *Lite counterpart. 


Also, it is perfectly fine to nest TimelineMax instances (event repeated ones) inside a TimelineLite parent timeline. The entire platform is built around an architecture that uses a core "Animation" class with a common set of methods/properties that allow them to interoperate very well. Drop TweenMax or TimeilneMax instances into a TimelineLite or drop TweenLite and TimelineLite instances into a TimelineMax - no problem. 


The beauty of this kind of architecture is that you can build your own functions that spit back ANY of those and rest assured that you can nest them in a parent timeline. It lends itself to modularized code. You can change stuff inside any of your functions anytime (like change from returning a simple TweenLite to a complex TimelineMax) and it works great. 


The TweenMax JavaScript file contains ALL of the key classes (TweenLite, TweenMax, TimelineLite, and TimelineMax) and you should feel free to use any and all of them as you wish, but my personal preference is to still use the *Lite classes whenever possible simply for speed reasons. Don't get me wrong - TweenMax and TimelineMax are extremely optimized and fast too, and you'd probably never notice any difference in a real-world project performance-wise, but I'm just an optimization freak. 


skurrilewelt, my best guess (without seeing a codepen or jsfiddle) is that maybe you've got code elsewhere in your app that pauses your "mtl" master timeline. If that parent timeline's playhead isn't moving, it won't move across the child animations, thus they'll act as if they're paused as well. 

  • Like 3
Link to comment
Share on other sites

i have a question then Jack or Carl...


so since its perfectly acceptable to mix TweenMax and TweenLite..

  • what would be faster using TweenMax or including separate js files along with TweenLite.. like CSS plugin, etc

i know its best to cut down on server requests but as far as GSAP like you described above ..

  • which is faster regradless of multiple server requests .. including one TweenMax file or TweenLite and other GSAP plugins?

thx ahead of time

Link to comment
Share on other sites

From the data I've seen, it's more important to reduce the number of server requests especially for mobile devices on cell networks (latency is HUGE). Of course there's a limit to that - it'd be faster to load two 10kb files than one 1MB file, but for GSAP, I'd probably say that for pure speed, here's the list from fastest to slowest load times if you ONLY need TweenLite and CSSPlugin (obviously if you need TweenMax-specific features, just load that one file):

  1. Concat and minify TweenLite and CSSPlugin into one file.
  2. TweenMax.min.js
  3. TweenLite.min.js + CSSPlugin.min.js (two files)

This makes absolutely no difference in terms of runtime performance, of course - it's just for the initial loading. 


Does that answer your question?

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...