lizettevanboom

Thanks! I will look into it.

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: https://codepen.io/edr2023/pen/GRLXyjB 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.

Bedankt @mvaneijgen and thanks @Toso! It works, nice to see two different approaches. Good lesson for me that you can first set up an animation with a timeline and then convert it to distance.

Hello everybody, I've been struggling for a few days with this overlay scroll effect I want to build. I have attached a codepen. I want to create a transition effect between div-1 (yellow) and div-2 (green). Both divs have the same size as the viewport; (100vw by 100vh) and are on top of each other. When scrolling the second div becomes visible and is overlayed on the first div. The effect is connected to scroll with triggers and scrub. The challenge is that I want to first pin div-1 for some time / distance, before the div-2 transition effect starts. As you can see in my demo, so far I was only able to get the effect to work at all when the scroll trigger is on 'top top'. But this is not what I want, because this way div-1 disappears too fast and users won't be able to read the content of div-1 properly. I have tried a lot of stuff, such as creating a new scroll trigger to pin div-1 (by setting end: '+=3000', ) but I can't get this to work. I was thinking this might be because of the positioning; the divs are right on top of each other, so I guess that makes it more difficult to set scroll triggers on each div one following the other? Is there a solution to this or does the absolute positioning on top of each other simply make the desired pinning before the transiton effect impossible? Thanks in advance for any advice!

Thanks for your help @Rodrigo and @deVitae !

Hello everybody, I'm also making a similar type of drag slider. I'm using AnimatiCSS pen (post above) as basis (thanks for setting this up by the way!). However my intention is to create a slider with videos that have variable widths, but all videos have the same height. I'm running into some trouble trying to fix this so that there is only a clean 20px gap between each video. Somehow the items all get a larger width so that an unwanted large whitespace between videos appears. This seems to be coming from the javascript, but I don't have enough skills to make this work. Is it possible to fix this or should all videos just be exactly equal proportions to make this whole set up work? Here is my code-pen: https://codepen.io/edr2023/pen/poGqReZ Thanks very much in advance for any advice.