Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Daniel Park

Starting positions for animated elements.

Recommended Posts

Question about using TweenMax for scroll based animations.

 

Is it better to set the initial position of an element in CSS and then animate using Tween or is it better to do everything using GSAP.

 

For example, I have a scroll based animation where the opacity and transform properties are animated from 0 to 1, and translate3d(0,80px,0) to translate3d(0,0,0).

Even though all these DOM elements will be animated from an opacity of 0 and translate3d(0,80px,0), I do not set initial starting properties in CSS. Is this more costly in the browser? Would it be more prudent to explicitly set the opacity and transform properties of all to-be animated elements using a CSS class instead?

 

I guess what I'm asking is, is setting an initial opacity of 0, and transform: translate3d(0, 80px, 0) for all to-be animated elements and then using Tween to animate to opacity: 1 and translate3d(0, 0, 0) less/more costly in terms of browser performance vs not setting initial properties in CSS? Are these even correlated?

 

I'm asking this question because I've been inspecting my sites performance tab in the debugger and there are several instances of severe FPS drops during these Tween animations. I'm wondering if setting/not-setting the initial values is causing the issue, due to repaints and composite layers, etc. In my head, it makes sense that initial position values would have an effect, but then again I could be totally wrong and these might not be correlated at all.

 

Any experienced, know-all gurus willing to shed some knowledge and insight into this topic?

Link to comment
Share on other sites

Hi @Daniel Park :)

 

I can't speak for everyone else, but my general rule of thumb is I use GSAP to set() everything I plan to animate. If a property is not going to change, I use my stylesheet. If you're triggering animations on scroll, you wouldn't even need to set() them. You could simply use a from() tween and they'll be all ready for you to tween when you hit the scroll trigger.

 

As far as performance and the FPS drops you're seeing, we'd have have to know what you're animating. Are they large SVGs and pushing the browser a bit too hard? Ultimately, GSAP is animating values and a lot depends on what you have moving on the screen and how hard you're making the browser work.

 

I'm not sure if that helps at all, but that's my two cents worth. Others may jump in here as well.

 

Happy tweening.

:)

 

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

The only issue with using set for items initial state is that the DOM may render the elements before the javascript is ready and you may see a flashover of the item unexpectedly. There's various ways to get around that such as hiding page display until the javascript is loaded. Setting the initial state in css will pretty much always prevent it though. You could even set it inline on the item since gsap is just going to animate the inline properties anyway, lots of people would frown on that, but I don't care.

 

With respect to performance I don't see any likely difference in performace whether you set the css in gsap or pick it up from the item's current state. Maybe if you had a large number of items it might.

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