Jump to content


Text animation to mimic caption

Recommended Posts

Hi, I'm looking to use ScrollTrigger to mimic a video caption (combine with THEEjs)

I'm very new to ScrollTrigger so please bear with me. I have 3 problems as follow:


1. I kinda achieve the first sentence using pin but I can't find a way to hide the first sentence after its end. So it kinda fly up and ruin the effect:



2. Maybe I misunderstand about how gsap timeline works but I set a timeline to control the GLTF animation with the end set as 1000vh:

let scrollingTL = gsap.timeline({
        scrollTrigger: {
            trigger: renderer.domElement,
            start: "top top",
            end: "1000vh",
            pin: true,
            scrub: true,
            markers: false,
            onUpdate: function() {

then I add a scroll trigger for the first sentence text with the ending of 500 vh:

scrollingTL.to("#p1", {
        scrollTrigger: {
            trigger: "#p1",
            start: "bottom 80%",
            end: "500vh",
            pin: true,
            scrub: true,
            markers: true,


I thought since the the sentence ends after 500vh while the anim ends after 1000vh, so the text should stop being pinned after half of the anim but it lasts way longer than that. I'm not sure what's wrong with it.

3. Is there a better way to sync the second, third, fourth etc sentence after the end of the previous one? Right now, putting random numbers in and hope they sync up is what I'm doing and it's a pain to do with more text or tweak their time.

Thank you in advance


See the Pen dyjjKxm by Andinh123 (@Andinh123) on CodePen

Link to comment
Share on other sites

Personally I would never have ScrollTriggers in ScrollTriggers. Just have one ScrollTrigger with a timeline animation. The best thing to do 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.


Here I've forked your pen and removed all ScrollTriggers and disabled your first ScrollTrigger, so that I can focus on the animation and not worry about ScrollTrigger (yet), I've set up a default duration of 10 seconds, so that it's easier to watch the animation. Then I put everything on the timeline and use the position parameter to have certain tweens happen at certain points. For an explanation: duration * 0.25 will make sure that #p1 start at 25% of the timelines duration.


I've updated your HTML and CSS (changed it to SCSS)  to make my setup work better, so be sure to take a look at that. If you're happy with the animation you can uncomment ScrollTrigger to see how it works on scroll. Hope it helps and happy tweening! 


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

  • Like 3
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.