gmullinix Posted March 31, 2020 Share Posted March 31, 2020 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 1 Link to comment Share on other sites More sharing options...
GreenSock Posted March 31, 2020 Share Posted March 31, 2020 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). 3 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now