Jump to content


How to use .lagSmoothing() & lazy method in TimelineMax

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

Hi i just got new version announce newsletter and follow up the new feature in GreenSock library.  and i read all the documentation about new .lagSmoothing and lazy feature, and that is amazing, but i want to know how can i use that features in TimelineMax, i notice there is only mention in about TweenLite and TweenMax, i tried to add that feature in my TimelineMax but it didn't work. so my question is how we can use new lagSmoothing and lazy feature for TimelineMax. thanks.



- Yashi

Link to comment
Share on other sites

You don't have to do anything special to use lagSmoothing() in TimelineLite/Max because it's a core engine-level thing that affects all GSAP animations (including timelines). 


Think of it this way: there is a single timing mechanism at the heart of GSAP by which all tweens/timelines measure their time. lagSmoothing() gets applied to that one single mechanism (which is remarkably efficient). You could have 10,000 tweens in 1,000 timelines and they'd all be affected automatically simply because they're all looking at that mechanism to interpret time. 


Does that clear things up?


As for "lazy", that only applies to tweens because those are what actually read/write values. Timelines are merely containers for tweens. So you'd never need to set "lazy" on a timeline. 


I'm curious - you said you tried to "add that feature" to your TimelineMax but it didn't work - what did you mean? Were you literally trying to call TimelineMax.lagSmoothing() or something? If so, no need - when you set TweenLite.lagSmoothing(), it affects TweenLite, TweenMax, TimelineLite, and TimelineMax. Think of TweenLite as the essential core of the whole platform.

  • Like 2
Link to comment
Share on other sites

yes yes you are right, what i was tried is to create like this "TimelineMax.lagSmoothing()" and this is my code i'm try to achieve. this code work well, but i thought i can use that logSmoothing to my code. so every instant will work smoother. these instant come from database and show 10 or 15 instant in page and i was worrying about performance when it trigger so that why i ask that. thank for the advice. actually i'm new to GreenSock, i saw some couple of projects done with this library, and i was amaze and eager to learn this library and i use this everyday. if anything i'm doing wrong please advice. if you can please explain me bit more simple. i saw the demo, greensock beat all other library even velocity.js. nice work.


$('.db-album').append('<div class="first"></div><div class="second"></div><div class="third"></div><div class="four"><img src="img/vinyl2.svg" alt="" /></div>');
$(".db-album").each(function(i, e){
var album = new TimelineMax({paused:true});

var first  = $(e).find('.first'),
second  = $(e).find('.second'),
third  = $(e).find('.third'),
fourth  = $(e).find('.four img'),
fifth  = $(e).find('.db-song-info'),
sixth  = $(e).find('.db-song-play'),
seventh = $(e).find('.db-song-add'); 

album.to(first, 0.2,  {rotation:0, boxShadow:'none',  ease:"Power2.easeInOut"})
.to(second, 0.2,  {rotation:0, boxShadow:'none',  ease:"Power2.easeInOut"}, -0.1)
.to(third, 0.2,  {rotation:0, boxShadow:'none',  ease:"Power2.easeInOut"}, -0.1)
.from(fourth, 0.5,  {x:-25, ease:"Power2.easeInOut"}, -0.1)
.from(fifth, 0.5,  {x:-50, ease:"Power4.easeInOut"}, -0.1)
.from(sixth, 0.5,  {y:-120, ease:"Power4.easeInOut"}, -0.1)
.from(seventh, 0.5,  {x:50, ease:"Power4.easeInOut"}, -0.1);

  e.animation = album;

$('.db-album').hover(over, out);

function over(){

function out(){


Link to comment
Share on other sites

Great. Glad to have you on board. I think the more you play with GSAP, the more you'll like it. You just have to get past the slight learning curve and then it'll really start clicking and you'll discover things that pleasantly surprise you. 


The only odd thing I noticed about your code was that you were specifying an absolute insertion time of -0.1 for a lot of your tweens. Technically, that's "illegal" because you can't have something start before the beginning of a timeline (time:0), but the engine is smart enough to notice that and then it picks everything up and moves it forward to compensate. 


I wonder if you meant to use a relative offset of "-=0.1" to cause that tween to overlap the previous tween by 0.1 seconds. Is that the case? 

  • Like 1
Link to comment
Share on other sites

Sorry about my delay respond. and Yes yes, your are absolutely correct, i want every tween to play with the same time, but with slightly changed time, not one after one. and sorry if i did some mistake :cry: , I'll fix that problem. thanks and this is what i mean.

eg: if i hover that element, the time line start to play but not one after one, i want to offset the time

Practical demo:

if first object move from 1 to 3, then i want to move 2nd object from 2 to 4 or 1.5 to 3.5. so no one notice it happen in same time. but it is,

that's why i use that.

in previous message i send you about my ongoing project code, it's a music portal WebApp, if user hover the album art, each block element stack and align to each one and vinyl come out from album cover right side. this is just a small timeline, but it is interesting to incorporate my project with GSAP, it's easy and fast, also i notice it can handle all the browsers related prefixing ,other best method and complex calculations to play our tween smoother than other.

thank you once again for this great product. :D:-) :smile: :-):D

  • Like 1
Link to comment
Share on other sites

  • 5 months later...

Hijacking this thread since I think we're asking something similar. 


Do you think it would be beneficial to have a way to disable "lazy" for an entire timeline?


I often found that it causes issues with elements that were set to display:block (with .set) and then faded with autoAlpha (it flashes the element first and then the animation starts from opacity:0). Since I have various tweens, I'd have to add lazy:false to all or find the ones that benefit from it. It would just be easier if I could disable it once per timeline

Link to comment
Share on other sites

Actually, a better solution (performance-wise and kb-wise) would be to simply call TweenLite.render() after you've created all your timelines/tweens. That simply tells the main timeline to render all the tweens as if a "tick" just happened. This is typically only an issue on the very first tick/render anyway. 


Does that help? 

  • Like 2
Link to comment
Share on other sites

Yeah, that could work, as long as it's not actually rendered twice (in the same frame) if called twice, which will happen in multi-module setups.

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.