Jump to content
GreenSock

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

Scroll Trigger Text Reveal

Go to solution Solved by PointC,

Recommended Posts

Hi All,

 

I have a few separate lines of text with css backgrounds being animated by Scroll Trigger using stagger.   This setup in my Pen works but Id like to be able to apply the animation to a paragraph instead of stacked single lines.   So I want the animation to display on each line but using a single text paragraph.  I think SplitText could help me do this but not sure how.   Anybody got an idea? :D  

See the Pen GRQjXPE by deltafrogcraft (@deltafrogcraft) on CodePen

Link to comment
Share on other sites

  • Solution

Split your text into lines, loop through those targets and create a ScrollTrigger for each one. Boom - you're good to go. Happy tweening. :) 

See the Pen 3e64dc369cd5e8a71235b7d123180339 by PointC (@PointC) on CodePen

  • Like 4
Link to comment
Share on other sites

Wow!  Amazing Craig.  Just amazing.  

  • Like 1
Link to comment
Share on other sites

Thank you so much Craig.  Learning a lot from the GSAP team.  

  • Like 1
Link to comment
Share on other sites

1 hour ago, DeltaFrog said:

Wow!  Amazing Craig.  Just amazing.  

Happy to help. Thanks for your Club membership. We appreciate the support. :) 

 

1 hour ago, DeltaFrog said:

Learning a lot from the GSAP team.  

Yep - it's a phenomenal community. I wouldn't know much of anything about JavaScript and GSAP had I not started hanging out here. I found the best way to learn was to try and help other users and answer questions. You'd be surprised how much you pick up just by trying to figure out someone's code problem.

 

Have fun and happy tweening.

:)

 

  • Like 4
Link to comment
Share on other sites

I noticed when I resize the browser window the Split text divs stack in undesirable ways.  Is there a way to fix this?  Is this a CSS issue?   

Screenshot_1.png

Link to comment
Share on other sites

Resizing can be a bit tricky with lines and a fixed font size. I used 10vw for a font size in my fork of your demo and it seems to work just fine. Another option is to use a resize listener to revert the text and re-split when the user has finished resizing.

 

Happy tweening.

:)

 

  • Like 1
Link to comment
Share on other sites

I'll give the resize listener a try, big thanks!  

Link to comment
Share on other sites

Thanks Craig, just to explain further - the issue resulted when trying to transfer the code into WordPress:twisted::P, the text block is now h2 and its acting a bit differently in the WP environment.   I tried to recreate the same issue in CodePen but could not which is often a hurtle I run into when implementing in WP.   This site https://www.lucidmotors.com/air does the same style animation but when the browser is resized the text and animation remains perfect.   I'm trying to duplicate this setup.   :D  

Link to comment
Share on other sites

Yeah - looks like they just have a resize listener and re-split. You can see on wide screens there are 4 divs for the lines and that jumps to seven as you shrink the viewport. They also drop the font size a bit for mobile. 

 

Best of luck. :) 

 

 

  • Like 2
Link to comment
Share on other sites

Super duper helpful, I'll give it a try. :D 

Link to comment
Share on other sites

I'm a bit confused, I added this listener but not sure how to re-split the text.  :S 

 

See the Pen jOZVEGZ by deltafrogcraft (@deltafrogcraft) on CodePen

 

 

window.onresize = function() {
    split.revert();
    split.split();
};

 

Link to comment
Share on other sites

Oh on second look...maybe the above code is working but I also need to reinitiate the scroll trigger?  

Link to comment
Share on other sites

Yep - in this case it's not a simple matter of refreshing ScrollTrigger because the number of targets is changing. On wide screens you'll only have a few lines and triggers, but on small screens you may have 10 or more. So you'd want to loop through and kill the ScrollTriggers when you revert the text. Then re-split and re-add your ScrollTriggers. 

 

Make sense?

  • Like 1
Link to comment
Share on other sites

Ahhh, makes sense.   So when I revert the text it doesn't change how scrollTrigger is looking for the initial number of lines in the array created by SplitText...and that's why I have to kill the initial ScrollTrigger after reverting the text.  
 

1) revert split
2) loop through and kill ScrollTriggers 
3) re-split and re-add ScrollTrigger.  

 

I'll give it a try, thanks Craig. 
 

Link to comment
Share on other sites

Hey Craig I stumbled my way through this and kinda have it working.   Is there a better way to re-add the scroll trigger without duplicating the code?   

 

See the Pen jOZVEGZ?editors=0010 by deltafrogcraft (@deltafrogcraft) on CodePen

Link to comment
Share on other sites

You're pretty close. :)

 

The thing to ask yourself when you repeat code is -  can I use a loop and/or a reusable function to make this happen? So, in your case, the initial creation of the ScrollTriggers can be moved into a function which you call on page load and again when you revert and re-split the text.

 

Here's a fork of your demo. I've also added a throttle so it's not constantly firing during a resize event. Adjust that to your liking or remove it completely if you prefer. 

 

See the Pen NWybQow by PointC (@PointC) on CodePen

 

It's also not necessary to call revert() on the text when you'll be calling split() again. Not that it hurts anything, but split() just automatically calls revert first if necessary.

 

Hopefully that helps. Happy tweening.

:)

 

  • Like 3
Link to comment
Share on other sites

So so awesome, I started to attempt this type of setup so happy to see I was on the right track.   Thanks for adding the delay, I was wondering about how to address the jitter issue that occurs when resizing.  The delay works for small resizes but I ended up removing it because I did not like how it could break the paragraph if the user resizes quickly which is a trade off for the jitter.  Greatly appreciate your help.  I can live with this setup but I wonder how https://www.lucidmotors.com/air set theirs up because their resize seems to have the best of both worlds. 

 

See the Pen eYVgOmX by deltafrogcraft (@deltafrogcraft) on CodePen

Link to comment
Share on other sites

My personal design philosophy is not to worry how animations look during resize. I'm also of the mind that outside of the design and development world, not many users actually resize their window while browsing. That's just my two cents. YMMV.

 

That being said, I think the Lucid Motors site is not using a scrub value. They have it set to true, but there doesn't appear to be a 'catch-up' to me. Drag up and down with the scrollbar and you'll see what I mean. When you navigate their site with your mouse wheel, you'll see they have some kind of smooth scrolling happening (doesn't appear to be ScrollSmoother though) which is why the text seems to have a scrub value. 

 

The glitch you see when resizing your demo is that scrub trying to catch-up on each line as we're firing the resize a lot. If we set scrub to true (no number - just Boolean) and use the awesome ScrollSmoother plugin, you'll see that we can achieve the same effect. 

 

See the Pen MWQJWqJ by PointC (@PointC) on CodePen

 

I also noticed they are using a mask over each line (same color as background and opacity set to 0.65) and animating its scale rather than animating the background position of clipped text. I made that change to the fork above as well.

 

Hopefully that helps. Happy tweening.

:)

 

 

 

  • Like 3
Link to comment
Share on other sites

Always going above and beyond my wildest expectations.  Thanks Craig.  

  • Like 1
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.
×