Sahil

Probably because you are setting stroke-dasharray on 3rd path, and internally gsap animates stroke dasharray to draw path. Though instead you can group all 3 paths and use a mask on the group to achieve same animation. You will find plenty of examples that show how to use mask to reveal path.

@Liz B You would still need to wrap your keywords separately so you can select and animate them with different delay. This solution would work only when your keywords are of similar length, if length difference is higher then your animation will look inconsistent. https://codepen.io/SahilAFX/pen/eYqGpZX?editors=0010

@ixd.dxdesign There are multiple ways to do it, depends on the behavior you want to achieve. Check the demo. https://codepen.io/SahilAFX/pen/JjgWBpp?editors=0010

@Phil Owen Issue is you are playing all animations when first scrolltrigger is triggered. Instead you need to loop through target areas and trigger animation for that specific area. https://codepen.io/SahilAFX/pen/PoMWeVJ?editors=0010

@t1B0Y Here is tweaked version that might help you get closer to the effect you are trying to achieve. Check comments to see what I changed. I didn't reuse points in this demo but to reuse existing points, you can find closest point then iterate through the subsequent points using similar loop. https://codepen.io/SahilAFX/pen/qBeZQea

You can use stagger in this case to write that animation in 1 line. Following demo shows same animation but with boxes. (Please post a minimal codepen demo in future, it helps us while responding) https://codepen.io/SahilAFX/pen/wvLqRqm

Your issues are related to CSS only and can be seen without using gsap. Main issue is that you are setting `.building_hope-wrapper` position to absolute, it takes the content out of document flow and it overlaps next section. Maybe you can set position absolute on `.wheel` instead. Second issue is that you are setting height of `.building_hope` to 100vh, so it also can cause content to overflow. Another issue is that you are setting align-items to center on `.building_hope`. Overall the issue has nothing to do with gsap and you need to fix your layout to solve it. https://codepen.io/SahilAFX/pen/yLdOREN

You can use clearProps to clear all properties or pass comma separated list to clear specific properties. https://codepen.io/SahilAFX/pen/NWZGYoy?editors=0010

Main issue comes from setting scale in CSS, not sure if it is a bug or technical limitation. Also, if you set transform origin in CSS then rect will scale from bottom of SVG. It is not visible in your example but if svg has more height than rect then it will be visible. GSAP correctly sets transform origin and element will scale from expected position. So for now I would recommend setting scale using gsap and maybe transform origin as well. https://codepen.io/SahilAFX/pen/rNgEdmm

You could pin 2 different containers and move content to respective container based on scroll position.

You can set opacity of h1 tag to 0 in css, then set it back to 1 before animation. Solution

I think you just need to remove min-height from body. https://codepen.io/SahilAFX/pen/JjqLjvP

You can use scrollTo plugin to scroll to certain element, but because you are animating sections, you can't use them as reference. Instead, you need to wrap them in another wrapper so you can use this wrapper in scrollTo. https://codepen.io/SahilAFX/pen/jOReGmM

Fixed background only works if element and any of its parent element doesn't have any transform applied or doesn't have position set to fixed. In order to create scroll effect, ScrollSmoother wraps content in a fixed parent, you can see this by inspecting from dev tools. To achieve this effect in ScrollSmoother, you will need to position the image manually. https://codepen.io/SahilAFX/pen/GRLXaGJ

There you go https://codepen.io/SahilAFX/pen/eYojXbm I have set fixed dimensions for container for demo. When you make it responsive, you will need to change the value by which you divide pos.y. You can use getBBox method of svg to get current height of the path. You will need to tweak animation and calculation for desired effect.