Jump to content
Search Community

Bug with sine ease and display

gmullinix test
Moderator Tag

Recommended Posts

Getting some weird behavior when animating elements with the sine ease.

 

The boxes should all start from display: none, animate to display: flex, and then animate back to display: none. However, boxes animated with the sine ease do not follow this logic and are set to display: flex at the wrong times. Additionally, sine vs sine.in seem to break in different ways. I tested with several other eases and did not encounter this same problem.

 

Please see the Codepen for more details.

See the Pen vYOPNpK by gem0303 (@gem0303) on CodePen

  • Thanks 1
Link to comment
Share on other sites

Good catch! This is quite the edge case that'd only affect the "display" property that's animated with the sine ease. The reason is that Math.cos() of half Math.PI ends up being a super tiny number instead of 0, thus when the progress of the tween is 1 and that's fed into the sine ease it comes back as 0.9999999999999 instead of 1, thus the condition isn't met that's necessary to toggle that property. 

 

It should be fixed in the upcoming release which you can preview at https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js

 

In the mean time, you could simply use a set() to toggle that value (it's not tweenable anyway - we just have it as a convenience). 

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