Two-Column ScrollTrigger (Sticky) with Zoom-Out and Reveal

[rm2773]

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

 

 

See the Pen PodbxKx by rm2773 (@rm2773) on CodePen

[Rodrigo]

Hi,

 

What exactly is not working in your demo? The timing between the sections in the right appearing and the rotation of the SVG element?

 

I think the problem here could be on the fact that you're creating a lot of ScrollTrigger instances. If you want to control this over just one section of scroll, why no just create a single timeline that is controlled by a single ScrollTrigger instance?

 

I think the best approach here is to completely remove ScrollTrigger and focus on getting the animation working in the way you intend, then once the animation looks exactly how you want, add ScrollTrigger back to the mix. You might want to check this video to see what I mean:

 

Hopefully this helps,

Happy Tweening!

[rm2773]

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.

[Rodrigo]

Hi,

 

What green shaded area? This one?

 

There are a lot of ways to reveal an image, especially if that image resides inside an SVG tag. Mask, Clip, Opacity are just three I can think of.

 

As I said I'm not sure I'm seeing the issue you mention in the codepen example, that's why we need you to be as explicit as possible about it.

 

Finally I strongly recommend you again to remove ScrollTrigger from this until your animation works in the way you want.

 

Happy Tweening!

[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/

[Rodrigo]

I'd use a fade-in, that's it. Just remember make sure that your timeline works the way you expect and then add ScrollTrigger to the mix.

 

Happy Tweening!