Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Mantvydas

Animating not absolute positioned elements

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 guys,

 

I was wondering when animating an element, better performance would be animating absolute positioned element or doesn't matter?

Now I am working on one animation where I use basic animation on x:

TweenMax.to(['#element1', '#element2'], .7, {x:350});

 These 2 elements has basic positioned, its not absolute or anything. But sometimes animation is really sluggish..

 

Link to comment
Share on other sites

Hi @Mantvydas :)

 

Relative positioned elements should animate just fine.  You said the animation is sometimes sluggish. Did you mean on the first play or randomly? If it's on the first time your timeline plays you may want to try this:

 

tl.progress(1).progress(0); // this will record all the values upfront. 

 

I also don't know what those elements are and how big they may be.  How hard are you pushing the browser? Are they the only thing animating or are they part of a timeline with hundreds of elements moving at once? If you can put together a demo, we can get a better idea of what may be causing any sluggishness. If there is an issue, it's unlikely to be a GSAP related problem. It's most often browser related as that's where all the rendering happens.

 

Hopefully that helps a bit. Happy tweening.

:)

 

 

 

  • Like 3
Link to comment
Share on other sites

Hey @PointC,

Thanks for response. 

 

You intrigue me with Your answer because most of the times animation is sluggish the first time. I am not using timeline, I am using separate tweets. How I can use this progress without timeline?

 

Thanks

Link to comment
Share on other sites

The progress() method is available for tweens too.

 

https://greensock.com/docs/TweenMax/progress()

 

If you have a bunch of loose tweens, I'd recommend a timeline for easier control, but that's just my two cents worth.

 

Happy tweening.

:)

 

  • Like 6
Link to comment
Share on other sites

Hello @Mantvydas and welcome to the GreenSock Forum!

 

You will get better performance animating position absolute elements versus position static or relative. This is due to the fact that when you animate the element it will be animated outside the flow of the document. That means that it wont have to calculate its surrounding elements in the DOM, since elements with position relative and static are still in the flow of the document. But its always best to animate with position absolute so when the element animates its surrounding elements wont need to be calculated, but sometimes a layout might not allow you to do so.

 

Just my two cents, Happy Tweening  :)

 

Resources:

CSS position: https://developer.mozilla.org/en-US/docs/Web/CSS/position

CSS layout positioning: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning

CSS visual formatting model: https://developer.mozilla.org/en-US/docs/Web/CSS/Visual_formatting_model

  • Like 4
  • Thanks 1
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.

×