rm2773

Yes that's correct! I want that green area ONLY to "swipe/fade" in from left to right, just after the rotation ends. Like the yellow underline here, that you see in this hero animation: https://annualreport.helios.org/2021/

I'm confused as to how to reveal the green shaded area at the end of the timeline. I'm not exactly sure how to layer-in another image reveal efficiently while all the other animations are happening; or at very least, I'm not sure of the best approach for doing so. Like should I use a single SVG and reveal the green area? Or use two images and fade one in? I understand what you mean with multiple scrollTrigger instances, and will definitely re-factor that code - thanks for the suggestion.

Hi everyone! I apologize in advance for the incomplete Codepen, but I think it demonstrates what I want to do. My example shows a map section (position:sticky) that is 6 x 6 columns, with an image on left and content on right. I'm wanting to achieve the following sequence of animations: 1) User scrolls down the page until they arrive at the Map section, which becomes "sticky". 2) Map section displays the SVG without the green color, and the animation begins (Codepen currently shows green visible at all times). 3) The user scrolls.... and map rotates and zooms out simultaneously, while also being unmasked by a rectangle shape 4) Once the 3rd content section becomes visible, I want the rotation to end, and finally the animation will reveal the green shaded area, from left to right. 5) By this time along with #4 above, the entire SVG should display behind both columns. 6) All animations mentioned above should be fully complete by the time the user scrolls out of the section I love GSAP and I really appreciate the great talent in these forums....I'm a Shockingly Green member and having the extra plugins available to members, is surely worth it. Thanks in advance! Rob

This CSS conflict was causing issues for me on another project - I just stumbled across this post and found my problem! Thanks!

Thanks for posting this solution - much appreciated!

Hi, great job on this image reveal sample. Would someone be willing to show this reveal with a rectangular reveal shape, versus the circle shape?