Jump to content
Search Community

Gsap scrollTrigger remove transition with scrub

MTR test
Moderator Tag

Recommended Posts

Hello everyone,


So I am trying to recreate text section from this website: https://chroniclehq.com/ . That section where words appear on scroll.
image.thumb.png.518fc884d92a4372ced670af13490a2b.png
 
I manage to get to the point where everything almost works, but I have problem with transitions and scrub. How can I make that opacity doesn't animate with scrub but instead word gets opacity: 1 without scrubbing opacity? I tried to add duration: 0, but in that case first word had opacity: 1 before section even pinned to the top. 

PS. Since initial code was created on my local pc I didn't used splitText plugin and created my own word splitting. 

See the Pen JjmGrzj by MartynasT (@MartynasT) on CodePen

Link to comment
Share on other sites

Thanks for the demo. If I understand correctly you can use a value very very close to 0 for the duration like

 

duration: 0.0001

 

Your tween is being paused at a time:0 but you also have the first item in the stagger have a duration of 0 with unique start and end states. It's kind of a logical nightmare to handle, and GSAP most often handles it swimmingly. In your case a super low duration gives some amount of time between the start and end and yet will be virtually imperceivable. 

 

The solution from @mvaneijgen is very clever and works great too!

  • Like 1
Link to comment
Share on other sites

@Carl and @mvaneijgen thanks for ideas. Both solutions works well, but I think I still want to add fade in but without connecting it to scrub. Instead of opcaity: 0.1 -> 1, I want to make that it animates but word animation is not connected to scrub. Does it make sense what I am trying to say?

 

Link to comment
Share on other sites

hmm, I don't think I understand fully because if you "still want to add fade in but without connecting it to scrub" my suggestion would just be to set scrub:false or don't set it at all. 

 

However, doing that I think it would kind of odd to have pinning set to true if the animation just runs on it's own. The user would then be scrolling without anything on screen moving or animating in any way.

 

I'm a bit lost at what you want but perhaps a happy medium is having each line stagger in each of its words with a slight fade.

 

Scroll slowly below:

 

See the Pen NWOxYMe?editors=1010 by snorkltv (@snorkltv) on CodePen

 

The basic idea is that each line has it's own ScrollTrigger. Perhaps this will help.

Link to comment
Share on other sites

@Carl So in that example website section is pinned because it still kinda scrubs word by word like I did. But in that website words animates on its on and its not connected to scrubbing. It's like it starts animation for words like it do (with stagger or something similar) but words smoothly fades in. In my demo words opacity is connected to scrubbing. I still need scrub because it should animate if user scrolls up. It looks like that in that website it triggers additional animation or something so words fade in smoothly. 

Link to comment
Share on other sites

@Carl I manage to solve this. I added transition on span itself in css and used your trick with duration:0.001. Not sure if it's best practice to have transitions in css while using gsap but it seems it works like I want.
 

Link to comment
Share on other sites

@Rodrigo thanks! Didn't notice somehow because it was animating chars and not words and looked like masking too. Okay so yeah it uses timeline and uses set. That makes a lot of sense. I managed to solve with css opacity and duration: 0.001 but timeline approach looks better. Going to test it now!

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...