MohsenKBZ Posted June 30, 2023 Share Posted June 30, 2023 hey there is there any way to combine scrubbed and non-scrubbed animations so they play seamlessly? the situation I have is pretty much like the codepen demo. 2 different animations coming from 2 different functions. animated properties can be different. first one is for a parallax effect and the second one is for the inview animations See the Pen KKrmZLj by Mohsen-Khakbiz (@Mohsen-Khakbiz) on CodePen Link to comment Share on other sites More sharing options...
Rodrigo Posted July 1, 2023 Share Posted July 1, 2023 Hi, In this case I believe is just not possible. You have two different animations affecting the same properties on the same object so no. If they don't share any property being animated, yes it could be done, but your current example is animating the same properties on the same object. Here is a fork of your example with different ones: See the Pen XWyRqmw by GreenSock (@GreenSock) on CodePen Finally is not really a good idea to make the element you're animating the trigger element in a ScrollTrigger instance, it could lead to unexpected results. Hopefully this helps. Happy Tweening! 1 Link to comment Share on other sites More sharing options...
MohsenKBZ Posted July 1, 2023 Author Share Posted July 1, 2023 @Rodrigo is there any other way to achieve it at all? Link to comment Share on other sites More sharing options...
Solution GreenSock Posted July 2, 2023 Solution Share Posted July 2, 2023 Why not just wrap your element in a container (or two). So use the outer container as the trigger/pin, then animate the child's transforms for parallax, and then that child's child's normal transforms for the other effect. Nice and clean way to modularize things. Otherwise, like Rodrigo said, it logically can't make sense to animate the same properties to completely different values simultaneously. Like in your demo you've got y animating to -200 and also to 50. How could it do both simultaneously? Another option is to use proxy objects where you animate generic properties and then combine them in an onUpdate, applying them to the transform value(s). But I suspect the container strategy is simpler/cleaner. Good luck! 2 Link to comment Share on other sites More sharing options...
MohsenKBZ Posted July 4, 2023 Author Share Posted July 4, 2023 thanks for help guys. eventually I went with creating 2 containers for parallax and animations 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