Jump to content
Search Community

ScrollTrigger text highlight with simultaneous slide into screen

sarneeh test
Moderator Tag

Go to solution Solved by mvaneijgen,

Recommended Posts



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 😅🙏

Link to comment
Share on other sites

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

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

@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 😭

Link to comment
Share on other sites

  • Solution

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

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

  • 3 weeks later...

@mvaneijgen Thank you very much for your support 🙇‍♂️ It was super helpful!


I have to say it was a bit unclear and seemed very hacky what you did with making the container a grid and forcing the elements to bo on the same row/col to create this effect. I feel like when you want to create some of those crazy effects you have to stop thinking in typical landing page ways - I guess there's no "clean" way to do those without hacking things a bit 😃


Anyways, that was very informative for me and I learned a lot from your tips, thank you again for your help!

  • Like 1
Link to comment
Share on other sites

Since CSS Grid, this feels a lot less hacky to me. Back in the day you had to position absolute everything and then you lost the height of all elements, with CSS Grid it is just a few lines of code that always work! 


Keep on tweening! 

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