ScrollTrigger text highlight with simultaneous slide into screen

[sarneeh 0 Likes (Newbie)]

Hey!

 

I'm trying to create a pinned section that has text sliding in from bottom, but also the text highlights based on scroll.

 

To visualise things, the text highlight should work like this: https://webflow.com/made-in-webflow/website/Highlight-Text-Tricks?gspk=NDg0MDA5Ng&gsxid=4fvj5r71le60, but with the effect of the text sliding in.

 

My take: https://codesandbox.io/s/gsap-text-highlight-issue-7f9q53

 

The things I want to achieve:
- the text should start animating when it passes the red line

- I should be able to scroll to the point that the text will be fully highlighted

- when the text would be fully highlighted (the end of scrolling) it should be positioned at the bottom of the section

 

I believe the problem I have is that I'm animating the scroll trigger, but I have no idea how can I workaround this issue. Would be very grateful for any suggestions or guidance how can I achieve this effect 🙏

 

Please let me know if something is not clear or if you need anything else to understand the issue / try to help me out 😅🙏

[mvaneijgen 2,469 Likes (Superhero)]

Hi @sarneeh welcome to the forum!

 

There was too much going on in your demo for me (it was not really a 'minimal'), so I've moved it to a codepen and started fresh from there. ScrollTrigger can only ever be on the timeline, not on individual tweens of a timeline!

 

Also you hardly need more then one ScrollTrigger to get the desired effect. Here is an example that just uses the normal scroll of the .paragraph. Then in the timeline I check if the .paragraph has met the trigger and then animate all the .line elements on the x axis with a stagger and then also your highlight animation that starts at the same time as the previous tween with a delay of +=0.3 seconds 

 

For now I've just set the background fixed with CSS, but this could also be done with ScrollTrigger pin: ".background" if you want to release the background when the ScrollTrigger is done. 

 

Side note: Keep in mind that the best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging. 

 

Hope it helps and happy tweening! 

 

See the Pen qBLjLQp?editors=1100 by mvaneijgen (@mvaneijgen) on CodePen

[sarneeh 0 Likes (Newbie)]

@mvaneijgen Thank you very much for your explanation and example! 🙏

Unfortunately, this still doesn't explain to me how can I achieve what I need. That's kinda why I wanted to show you the whole example and not go the minimal way as the problem is not so easy.

 

See the Pen OJrgYYR by jsarnowski (@jsarnowski) on CodePen

 

Here's a pen with something close to what I need, but if I try to push it forward, everything breaks 😅 Having the pen above, the next steps I want to achieve is:
1. `.actual-section` might have additional content which needs to be pinned when the text scrolls in

2. `.actual-section` needs to have an absolutely-positioned background image (that's visible while pinning)

 

I tried to do those things above but everything breaks when I do so 😭

[mvaneijgen 2,469 Likes (Superhero)]

That is totally fine, but it is easier to tackle one problem at a time. We need to learn to walk before we start sprinting!

 

So the text animation is working as intended? As I stated before you're better of removing ScrollTrigger and focus on the animation at first, this counts the same for the layout with CSS, you're better of removing GSAP and focus on your layout at first. 

 

This is what the layout looks like now without any JS code, I've used some CSS grid logic to have the background and the text stack on top of each other. I've wrapped your image in a container and set object-fit: cover to it (background-size: cover; only works on background-image: url(img.jpg));

 

and I've commented out some properties, which where not necessary. 

 

See the Pen gOZRVzQ?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

If that is looking great we can focus on the animation/ScrollTrigger again. There we use .actual-section as the trigger, we've moved the start points to the top of the browser and we pin the .background when it starts. 

 

This should get more and more like you want things to look right?

 

See the Pen WNLOVEB?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen