TrulyNewbie Posted June 9, 2022 Share Posted June 9, 2022 Hi, I tried to figure it out on my own but I'm stuck. The first two parts of my animation work how I want it to, but the last part doesnt. When i scroll down 50vh, I want the floating animation (rotatesletters) to stop and the shapes stop moving And then when I scroll back to the top of the screen, I want the floating animation (rotatesletters) to start again. I've tried: 1. overwrite: "auto", 2. rotatesletters.pause() 3. functions I've also rewritten the code four different ways I appreciate any help. Thank you See the Pen abqRQQg by NewbieRuby (@NewbieRuby) on CodePen Link to comment Share on other sites More sharing options...
akapowl Posted June 9, 2022 Share Posted June 9, 2022 Hello @TrulyNewbie That sounds and looks to me like you want to do something very similar to what was asked in the thread linked below. @GreenSock forged (or in other words, he whipped together ) a neat solution for that. Maybe have a look and see if that will help you. Link to comment Share on other sites More sharing options...
Cassie Posted June 9, 2022 Share Posted June 9, 2022 Or maybe even simpler? Sounds like a pause to me. See the Pen gOvBZWo?editors=0011 by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
TrulyNewbie Posted June 9, 2022 Author Share Posted June 9, 2022 58 minutes ago, akapowl said: Hello @TrulyNewbie That sounds and looks to me like you want to do something very similar to what was asked in the thread linked below. @GreenSock forged (or in other words, he whipped together ) a neat solution for that. Maybe have a look and see if that will help you. Thanks, I tried that a few days ago, but I couldn't figure out how to add the roatation Link to comment Share on other sites More sharing options...
Cassie Posted June 9, 2022 Share Posted June 9, 2022 Did some answers get deleted? I was sure this one had a solution and now I'm worried I'm going batty. Link to comment Share on other sites More sharing options...
akapowl Posted June 9, 2022 Share Posted June 9, 2022 14 minutes ago, Cassie said: Did some answers get deleted? I was sure this one had a solution and now I'm worried I'm going batty. I had posted and then hidden and later deleted a reply, because my try at the rotation in a fork of @GreenSock's example from that other thread does somewhat work, but it breaks if you scroll down to the very end and the tweens complete, and I didn't want to suggest something that doesn't work properly - sorry for the confusion. Basically what I did was to add everything related to the rotation in a similar way that it is being set up for x/y in that original demo - just split the getModifier function into a getModifierPixels and a getModifierDegrees, because rotations are in degrees and not pixels. But as mentioned, if you scroll to the very end and the tweens end then, the rotation will at somepoint be NaN (see console) - and I'm not sure why to be honest - never really wrapped my head around modifiers properly - and my head is too fuzzy by now to check if the math would simply just somehow not add up - although I think if latter was the case, it should also happen for the x and y, shouldn't it !? I later also gave adding scale a shot, since TrulyNewbie does also tween on the scale in his pen - but I noticed there's just no chance for me getting that added properly 😅 Anyways, here is that try I mentioned - just not really usable See the Pen rNJqPzm by akapowl (@akapowl) on CodePen Link to comment Share on other sites More sharing options...
GreenSock Posted June 9, 2022 Share Posted June 9, 2022 You almost had it @akapowl! The only problem was that in some scenarios the homeRot variable was 0 and the pullRatio would make the denominator 0 as well, so 0 / 0 evaluates to NaN. Here's a fork with a protection in place for that: See the Pen gOvQYrZ?editors=0010 by GreenSock (@GreenSock) on CodePen 👍 2 Link to comment Share on other sites More sharing options...
akapowl Posted June 10, 2022 Share Posted June 10, 2022 8 hours ago, GreenSock said: The only problem was that in some scenarios the homeRot variable was 0 and the pullRatio would make the denominator 0 as well, so 0 / 0 evaluates to NaN. Yeah, I had thought that could be the cause - but NaN also would be the case for the x and y at that point - and since they didn't break and would just continue on even after they were NaN, when the rotation is not implemented, I was a bit baffled and didn't continue on - thought it might just be something specific with the rotation instead. That is a nice fix, adding the safeNum() 👍 Link to comment Share on other sites More sharing options...
TrulyNewbie Posted June 10, 2022 Author Share Posted June 10, 2022 Perfect! Thank you all for your help! 1 Link to comment Share on other sites More sharing options...
Solution akapowl Posted June 10, 2022 Solution Share Posted June 10, 2022 1 hour ago, TrulyNewbie said: Perfect! Not quite yet I noticed some flickering/jumping, when you scroll down a bit. See the Pen WNMYGoK by akapowl (@akapowl) on CodePen But you can fix that by setting immediateRender: false on the initial gsap.set() in the wander function. See the Pen ExQOgZx by akapowl (@akapowl) on CodePen 3 Link to comment Share on other sites More sharing options...
TrulyNewbie Posted June 13, 2022 Author Share Posted June 13, 2022 Thank you! 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