Jump to content
Search Community

Bottom Property not animating properly. (Sometimes)

Chibie 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

I have a fixed positioned div with a bottom value of 10%. When i try to animate the div to the middle of the screen it only animates the left property. Then when the animation is done, the div jumps via the bottom 50% value set in the javascript code.

 

However, When i set the original bottom value to 0. It animates properly. Any idea why?

 

I created a codepen but could not replicate the situation. 

Here is the Codepen i created with the same exact javascript code

See the Pen XEdmRL by chibieee (@chibieee) on CodePen

 

I have created gifs to show the problem.

Here is the gif with the bottom: 0;

G8MO3PB.gif

 

And here is the gif with bottom: 10%;

WTNI0BD.gif

 

Thanks in advance!

Link to comment
Share on other sites

Maybe try animating top: 90% to top: 50% instead? The top CSS rule takes priority over bottom, so maybe there's some rule inheritance somewhere that messes things up... It's really hard to tell though. It looks like the div is animating to the position where it would be if it had position: relative, maybe that's worth investigating as well.

 

Hard to provide any more help without a look at the code, like Shaun said.

  • Like 4
Link to comment
Share on other sites

Hi @Chibie :)

 

Welcome to the forum.

 

As mentioned above, a demo will be necessary to get you the best answers. You said you could not replicate the issue in your demo. Does that mean you're seeing different results locally than you see in the demo? If the demo is working correctly, but your local version is not, I'm wondering if you may have some conflicting CSS transitions? Just a thought. We'll know more when we see a demo that shows the problem.

 

Thanks and happy tweening.

:)

 

  • Like 2
Link to comment
Share on other sites

If you can't seem to reproduce the issue on codepen I would suggest trying to isolate the cause in the original by stripping away all the additional animation (x,y transforms etc...)   and positioning temporarily to determine if it is the bottom animation alone that isn't working or whether it's combining with another property to cause it.

  • Like 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.
×
×
  • Create New...