How to animate a storyline with multiple stacked texts?

[lizettevanboom]

Hello everybody,

 

I'm struggling with the animation of a storyline I'm trying to make. The idea: on the left (50 vw) is a four step storyline that I want to scroll through. These are just four texts on top of each other. On the right (50vw) will come a 3js element, made by another developer, that also will have a timeline connected to the scroll progression. I simplified this element on the right in my codepen with a rotating text.

 

In a nutshell my goal:

-create an animated walk through with four steps, each step has one text element on exactly the same location in the viewport;
-each text has it's own scroll trigger, this triggers text split animations on enter and on leave. On each scroll, the currently visible text has a leave animation and the new text has a enter animation.

 

I first set this up as one long timeline with scrub true; you can see this in my codepen. This works fine, but I don't like how it works on mobile. It's easy to scroll a bit to far, so that you stop half way of a text enter animation. This does not give a good scroll experience. Therefore, now I want to change the code to remove scrub and so that each step (each text in this case) has it's own scroll trigger. 

My main attached codepen is the (working) version with scrub that I want to change.

In this pen I tried some stuff out with scroll triggers and failed: 

See the Pen GRLXyjB by edr2023 (@edr2023) on CodePen

 Basically I tried here to first create a scroll trigger that pins the wrapper of the storyline and then a scroll trigger for each .text element. But it does not work and I think I'm missing some fundamental knowledge on how to set this up.

 

Any advice on what direction I should look to solve this? 

 

Thanks very much in advance.

 

See the Pen mdgGBdY by edr2023 (@edr2023) on CodePen

[Rodrigo]

Hi,

 

In this case the Observer Plugin might be a better fit actually:

https://gsap.com/docs/v3/Plugins/Observer/

 

See the Pen XWzRraJ by GreenSock (@GreenSock) on CodePen

 

Here is a demo that mixes ScrollTrigger with Observer:

See the Pen ExEOeJQ by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[lizettevanboom]

Thanks! I will look into it.