Jump to content
GreenSock

T.Gregory

My timelines are rarely smooth, I know its some broader practice I'm missing - Even slightly altering Tweens from Codepen -

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

To further explain, I can make a simple animation with jQuery and it comes out as you would expect. I have, in the past, had good luck with some ambitious timelines with GSAP - but for some reason with simple Timelines and Tweens, I always seem to get jerky movement. Until now, I have been chalking it up to some combination of movement have their nuances and I would just keep changing things until I got it smooth but most of the time, I end up settling for a different effect just because its smooth. 

 

But its time I get to the bottom of this, there has to be something I'm missing conceptually. I've read that there is a winning balance between what to handle with CSS and what to handle with GSAP. 

 

I basically borrowed this code from a Pen that was smooth and just changed a few elements to apply it to my page and it got all choppy. Not just the blip at the end, it shakes when starting motion etc.. See it on my Pen. (CLICK ON "view full gallery" in Pen)

 

I hope someone can point out in this example and/or in general what I may be missing to get the smoothness. Maybe a different newbie blunder each time.

 

var tgh = new TimelineMax()
 
  tgh.from(".player-hider", 1, {height:'80vh', marginTop:'5vh', ease: Back.easeInOut.config(1.4), y: 0 });
  
    tgh.fromTo(".player-container_1", 1, { autoAlpha: 1}, { autoAlpha: 0, ease: Power2.easeInOut})
 
  .reversed(true);
 
tgh.set('.player-container_1',{autoAlpha:1});
function menuFunction() {
  tgh.reversed() ? tgh.play() : tgh.reverse();
};

See the Pen JRjXBE by code-a-la-mode (@code-a-la-mode) on CodePen

Link to comment
Share on other sites

Hello T.Gregory,

 

One thing right off the bat i see is that your animating height and margin-top. Those CSS properties will give you choppy animations since they dont animate on a sub-pixel level. You can try adding autoRound:true to your tweens to have GSAP force those properties to animate on a sub-pixel level. You will always get smoother animation of elements by using CSS transforms like x, y, z, scale, rotation or using opacity.

 

You have a lot of stuff going on in that codepen. So we can better help you, could you please reduce the codepen with just the CSS, HTML, and JS for what your trying to animate. This way we can focus on the effect your trying to do, and not any unrelated CSS and HTML markup.

 

Also since you are using from and fromTo tweens this video can be helpful since from tweens run immediately when it runs by default. So immediateRender: false might be helpful in general with the from and fromTo tweens you are using.

 

 

Thanks! :)

  • 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.
×