Bharateshwar

I was able to get to what I wanted. A really simple solution really 😅 Just applied color to another text instance positioned on top of the outlined text and just changed its width from 0. Gives an illusion of color being revealed. No complicated svgs or backgrounds required. Thanks for your inputs @Rodrigo @PointC. Please feel free to give any more inputs on my solution. 🙌🏻 Text Mask Q 3 (codepen.io)

hi @Rodrigo, thanks for the above, but it doesn't have a see-through outlined text if I'm not wrong. I too have found multiple such examples. There are just 2 reasons why I've been avoiding svgs, 1. I'm worried about the animation I want to do on text and the font size control to make it responsive. 2. I'm just not used to working with svgs. I'm attaching the codepen of the text animation I want, could you please help with me with a svg example of doing this if normal html/css approach is not possible? I'd really appreciate it. 🙌🏻 NOTE: after the outlines text is filled with color, the main-bg, or the dashed border in the example, doesn't need to show, the text can be with a solid fill. https://codepen.io/bharateshwar/pen/wvOvjzO

I'm trying to make an outlined text clip the div behind it to reveal the color it contains. I've attached the layout I'm trying to make. - The main-bg is an absolutely position bg, which is visible through the outlined text. - The BG is supposed to come in from left to right, to give the effect of the outlined text being filled with color. - The issue I'm trying to fix is that the bg is not actually clipped in the shape of the text, it's a whole box. This is the closest example I've found (VISUALLY ATLEAST), not really what I want as it actually has an opaque white background that's moving. I need my moving color to be clipped just by the text, so that before the color starts moving, the outlined text shows the main-bg behind. All parts of the main-bg should be visible. Unlike the example below. -> I'd appreciate if someone can help me find a solution without SVG clipping as I need to animate the text content too. (a stagger translate).

Thanks for all the help Rodrigo and mvaneijgen. I think I finally have what I need only with scroll triggers (though the code might be a bit messy). But I'm still going to give the Observers a try. And I have one small doubt and would appreciate if I could get an explanation for it. In the below codepen, in the JS file, I have commented out a set delay, duration and offset that don't work when the page is scrolled at higher speed. I wonder why that is. The uncommented values work seamlessly. https://codepen.io/bharateshwar/pen/poQrMPp Thanks Again!

I've added snapping to this example to explain a bit further. I want this behaviour BUT it should be smooth like my previous codepen animation, i.e. user is unable to stop in between the animation of a section, but can pause once the active section is in view. Snapping just adds a lot of jumpiness coz of the delay and snap. https://codepen.io/bharateshwar/pen/dyQzKEd

Yes @Rodrigo, it is as I need it. The only thing missing is that user should be able to pause between the sections with the scroll. i.e. current active section's animation should not pause with user pausing the scroll. Let me try to explain a bot more; We have 3 sections here. Suppose a section takes an height of 200px, the total height of the animated sections would be 600px. The intended animation would be: First section comes into view normally, and get's pinned when it's top reaches top of viewport. First section stays as is until user scrolls 200px, i.e until top of second section touches top of viewport, when this happens the first section moves out of view, and the second comes into view. User scrolls 200px more, When third section touches top, second moves out of view and third comes into view. If user scrolls past the third section, i.e. 200px more, it should just scroll out of view normally. And if user scrolls back to top, everything should work in reverse.

Hi @Rodrigo thanks for the above. I saw the videos, tried following the approach of creating animation first and adding scroll trigger later, but not sure if that approach will work for me; Coz what I need is that the animation should be triggered at specific scroll positions for specific sections. I've created the actual layout and animation I want for my project. BUT, it doesn't really match the intended behaviour, i.e. user should not be able to stop at such a position ??. (the animation is scrubbed) Adding my latest codepen below. https://codepen.io/bharateshwar/pen/xxQLjGm

Hi @mvaneijgen, thanks for your reply. I tried playing around with both yours and my solution, but none of those are actually doing what I need. Issue in my solution is that the heading actually moves while scrolling upwards on the page. ?? (Notice how Title 4 has moved down) I tried making the headings absolute, fixed but the pin spacer being relative is causing issues. And issue in the solution that you gave is what you have already pointed out, i.e the play head will do a linear tween. I was thinking of setting the progress of the timeline manually when a particular section's scroll gets triggered, but it's causing a jumpy effect. Would be great if we can get the animation to play as in my solution and the heading to stay in position as in your solution. We need a combination of both the solutions ?. Regards, Bharat

I want my animation to behave as if it is linked to scroll position, but it should not be paused when user stops scrolling. I didn't use scrub as with it the animation is paused when user stops scrolling in the middle of the animation. Things I'm trying 1. Move title into view when scrollTrigger starts 2. Move the active title out of view when scrollTriggerEnds 3. As soon as the previous active title is out of view, start bringing the next title into view. 4. Title position should not move with scroll. Things I need help with: Next Title does not wait for the previous title to move out of view. As I scroll, the container of the title moves, and hence the title moves too. Titles should always appear at the same position. (Attached images) I'm not sure if using the onEnter, onEnterBack, ...etc methods is the correct way to do this.