andrewandopen Posted February 21, 2020 Share Posted February 21, 2020 Hey Guys, Having a bit of trouble with an animation here. I'm using .set() to constantly transform an element using random values. When I scroll I want to transform this element off the page. The scroll animation is being triggered and it's working, but once it's complete it reverts back to it's original position (I think it's because the random value is constantly being created in the background). How would I overcome this? Thank you See the Pen OJVbMjr by andrewandopen (@andrewandopen) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted February 21, 2020 Share Posted February 21, 2020 Hey Andrew and welcome! In most cases like this where you have a constant animation and want to pair another animation with it, it's best to use a container element and animate the two separately. That will save you from having to do a lot of costly calculations trying to pair the two together One way to set it up: See the Pen jOPVqXL?editors=0100 by GreenSock (@GreenSock) on CodePen Note that I upgraded your syntax to use GSAP 3's syntax since you were loading it anyway. 1 Link to comment Share on other sites More sharing options...
ZachSaucier Posted February 21, 2020 Share Posted February 21, 2020 Side note: GSAP 3 has its own random functionality so you don't have to write your own: But if you want to keep your own that's cool too 1 Link to comment Share on other sites More sharing options...
andrewandopen Posted February 21, 2020 Author Share Posted February 21, 2020 Thank you so much Zach! I started using GSAP last week for the first time! Have to say your support is amazing! I'm converted!!!!!! 1 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