Jump to content
Search Community

Scroll back to reset

TrulyNewbie test
Moderator Tag

Go to solution Solved by akapowl,

Recommended Posts

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

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 :D) 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

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

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

  • Solution
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

 

 

  • Like 3
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...