Jump to content
Search Community

TimelineLite : are multiple instances smoother animation wise

Thomas James Thorstensson 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

Hello,

 

I noticed that when I chain animations with .to , sometimes if two animations start at the same time, there can be a slight jerk in the animation, even if I do the rotate:0.01 trick for Firefox, etc.

 

Question, is it perhaps 'smoother' or 'faster' rendering wise, to in those cases create multiple instances of TimelineLite, for example two instances, to ease the stress that one instance carries when starting two animations at a simultaneous time index.

 

I'm not including any code since I trust the question is a simple one, since it is simple to start to animations the same time by just giving them that time index at the end of the to. (object, time, {property: value}, 'timeindex')

 

Snoop out

Link to comment
Share on other sites

Hello Snoop

 

Starting two animations shouldn't matter. This can be a number of things and is really not simple since with CSS there can be so many possibilities due to:

  • various browser bugs,
  • or when the code is run.
  • What type of DOM elements?,
  • or if other CSS properties that are present or missing are affecting it.
  • What browser and browser version?
  • What OS and OS version?
  • The browser is very important as well. Is this Firefox on Windows or Firefox on a Mac?

So a codepen is always a best first step in us helping you, due to how many variables that can affect CSS transforms and animation performance. ;)

 

Are you waiting to run your GSAP code only when the DOM is ready and the window is fully loaded. This way you only start to animate elements when the DOM is fully ready and the window (stylesheets, images, fonts, etc) are fully loaded. That could cause what you describe also.

 

But to better help you, a reduced codepen demo example will help us see your code in context and in action.

 

 

Thanks!

 

:)

  • Like 2
Link to comment
Share on other sites

Hello Snoop

 

Starting two animations shouldn't matter. This can be a number of things and is really not simple since with CSS there can be so many possibilities due to:

  • various browser bugs,
  • or when the code is run.
  • What type of DOM elements?,
  • or if other CSS properties that are present or missing are affecting it.
  • What browser and browser version?
  • What OS and OS version?
  • The browser is very important as well. Is this Firefox on Windows or Firefox on a Mac?

So a codepen is always a best first step in us helping you, due to how many variables that can affect CSS transforms and animation performance. ;)

 

Are you waiting to run your GSAP code only when the DOM is ready and the window is fully loaded. This way you only start to animate elements when the DOM is fully ready and the window (stylesheets, images, fonts, etc) are fully loaded. That could cause what you describe also.

 

But to better help you, a reduced codepen demo example will help us see your code in context and in action.

 

 

Thanks!

 

:)

 

 

Thankyou Mr Jonathan for your answer.

 

I think it suffices for me. I was along the line that, as you say, 'starting two animations should not matter', and so, I will examine the code and see what I can learn by simple research. It will be fun to try some ideas in the office.

 

It is not an essential question as the animation is relatively smooth. But, one always strives to do better. In this case I shall rest my case and do the rest of the legwork myself.

 

As the hour is late and I am back from office and yet to eat, I bid you farewell.

 

Until next time

 

".S"

Link to comment
Share on other sites

If I may add without being too generic or too specific, you might want to start your research at the "where/when" is your code running.

 

One of the things people fail to notice is how much work the browser is doing when rendering a page, in our case, animation as well.

 

I tend to see the slight jerk that you report right at the start of an animation, that generally comes from all the initialisation that is happening at the same time. Just think about all the DOM processing and the JavaScript running right at the start of the page. Then, the pixel calculation and rendering that has to be done before we see anything.

 

As you said, for one that strives to always be better, look into the lifecycle of a frame and see what/how you could chain those processes in order for it all to fit in the 16.7ms that you have to render each frame. See what JS functions need to be run only once, the ones that will be called multiple times etc.

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