Paver Posted December 12, 2019 Share Posted December 12, 2019 GSAP is animating the properties [offset-x | offset-y | blur-radius | spread-radius] in webkit browsers when using certain rgba values for boxShadow. Putting the color value first like 'rgba(255,0,0,1) 0px 0px 70px 35px' fixes the issue in webkit but breaks in Edge which actually works correctly for the CodePen example. The only cross browser solution I have at the moment is to animate the color property in a separate object and then set it in onUpdate. See the Pen YzPWrJB by pavlo-livearea (@pavlo-livearea) on CodePen Link to comment Share on other sites More sharing options...
OSUblake Posted December 12, 2019 Share Posted December 12, 2019 The next version has a fix for this. https://greensock.com/forums/topic/22193-gsap-3-timeline-start-animation-before-last-is-complete/?tab=comments#comment-104975 See the Pen b544433ac39776c505dd52ae9bfeef21 by osublake (@osublake) on CodePen 3 Link to comment Share on other sites More sharing options...
Paver Posted December 12, 2019 Author Share Posted December 12, 2019 Sorry I missed that. Looks good ? Do you know if there's much performance overhead in setting the element style in onUpdate or is it essentially what's happening under the hood? Link to comment Share on other sites More sharing options...
OSUblake Posted December 12, 2019 Share Posted December 12, 2019 It's basically what's happening under the hood. Performance is mostly based on what properties you are animating/changing. Transforms, opacity, and some filters are the fastest. 2 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