Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

ScrollTrigger + ScrambleText wheel control

Recommended Posts

Hello, I would like some advice on my current issue, here is my requirements for my issue:

  • the #section2 needs to be ScrollTriggered
  • each animation from span/h2, each scramble needs to be finished on scroll, not stopping while there is scrambled text (sometimes you scroll a bit and it stops on some scrambled text)
  • each span/h2 needs also to be ScrollTriggered, so each animation needs to be finished (forcibly?) before it trigger the following span/h2 on the following staggered element (1st span animate, stops. Scroll wheel, 2nd span animate. Quick scroll wheel, following animation quickly animates)
  • It also needs to be pinned until the whole timeline is finished.

Hope you guys can help me with this issue, thank you very much!

See the Pen GREorLG?editors=1010 by ceoamaterasu (@ceoamaterasu) on CodePen

Link to comment
Share on other sites

I don't really understand the effect you're looking for exactly but the reason you're able to stop the animation while it's still scrambled is because you've set a "scrub" value which synchronizes the playhead of the animation to the scrollbar position. 


Here's a fork where I show how to just fire an individual animation for each of those spans and force the previous/next one to completion using an onEnter/onEnterBack: 

See the Pen ExXPpaB?editors=0010 by GreenSock (@GreenSock) on CodePen


I hope that at least gets you moving in the right direction. 

  • Like 4
Link to comment
Share on other sites

Nice, that is great start! I like the solution on the onEnter/back!


I need also is to chain two more animations like on my example (this might be the thing that is most difficult also for me): one is to change the color of the span (only after the scramble end) and the h2 settling on top a bit together with the color span change (but not while the span is being scrambled), all that while it is being pinned and I think this solution might only work while using one timeline of animations?

  • needs to be pinned
  • on wheel: if finishes faster / on fast wheel: finishes and goes to next animation
    • scramble text
    • change color
    • settle the h2

Hope I was clear!

Link to comment
Share on other sites

Hey Hakkie! 


We try to keep these forums to GSAP specific questions and assistance - we don't have the capacity to craft custom solutions right down to every requirement I'm afraid.

Jack's solution is a good starting point - you can also create timelines if you want to line up different animations one after another.

See the Pen OJgMqew?editors=0010 by GreenSock (@GreenSock) on CodePen

Why don't you give it a go - if you get stuck on a particular part, post your codepen and we'll be happy to help. 

  • Like 3
Link to comment
Share on other sites

Thanks Cassie, I have used the current solutions presented and now I have two more challenges on the solution regards timeline / end of animation:

  • I am trying to order the animations and seems pretty hard, everything tries to go at one in a single scroll instead of finishing the timeline and the moving to the next (animSpam should finish so animFade starts. When one span have already animFade, animH2 should trigger and the next animFade to the second span should start and so on)
  • When I scroll very fast to the end of it, the last animation still plays and the pin releases the section. Is there a way to finish the animation before the pin is released?

See the Pen WNOwvLE by ceoamaterasu (@ceoamaterasu) on CodePen

Link to comment
Share on other sites

You're making one of the most common ScrollTrigger mistakes - you should never nest an animation with a ScrollTrigger inside of another timeline because you can't have two different things fighting for control of the same playhead. Either the parent timeline will move it or the scroll position will - it would be a logical impossibility to have them both do it. 


You have over 100 lines of code in your demo - I would strongly recommend starting basic and building up from there. Just get one or two things going and if you get stuck, show us that minimal demo and we'd be happy to take a peek. 


Here's a fork of my last demo which shows how you can pin the element for longer and add more scrolling space between those animations and have them complete when you go past their end: 

See the Pen MWoyKBe?editors=0010 by GreenSock (@GreenSock) on CodePen

Link to comment
Share on other sites

Got it, I will be more careful to not do this mistake!

One more thing: I want to chain the color change animation (named fade on the Codepen) after all the animation spans, but seems both fire simultaneously even though I use the "<" on the end of the tween, and from there I think I have every thing in hands!


See the Pen gORrPqy by ceoamaterasu (@ceoamaterasu) on CodePen

Link to comment
Share on other sites

The position parameter is only for inserting things into a timeline. There is no such thing as a position parameter in a simple gsap.to(...). Even if it did exist, "<" would be incorrect because that means "start at the same time as the most recently inserted animation", so you'd be starting them all at the same exact time anyway :)


I don't understand what you're trying to do there, sorry. 


Here's a totally different technique where I just put callbacks into a scrubbed timeline, and I faded all the text at the end: 

See the Pen mdwPryX?editors=0010 by GreenSock (@GreenSock) on CodePen


This lets you space things however you want. 


I hope that gets you going in the right direction. 

  • Like 1
Link to comment
Share on other sites

I can say that you getting pretty much what I am want to do! The intent is to make the 

See the Pen GREorLG by ceoamaterasu (@ceoamaterasu) on CodePen

 work on the same way as the animations() did, but need also to chain two more animations, the fadeMap() and h2Map(), just like an 1:1 from the example.

We got the result we wanted (scroll and finish animation) but to order another animation as the very start of example seems to be much harder with the current code logic, check my edits!


See the Pen vYZKBRw by ceoamaterasu (@ceoamaterasu) on CodePen

Link to comment
Share on other sites

I don't really understand what you're asking, sorry. 


We don't typically provide build-to-order solutions here, but if you have a very specific GSAP-related question we'd be happy to answer it, especially if you provide a very focused minimal demo with only the code necessary to illustrate that one question. 

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.