Scroll Trigger - how do I achieve this wiping effect?

[chailandau]

https://curv.tumblr.com/

 

I am trying to use Scroll Trigger to get an effect like that. Is it possible? I have 3 divs with content (image, background image SVG, text). I want each div to wipe out and replace the previous div as you scroll, like the link I posted. How would I do this with Scroll Trigger?

[ZachSaucier]

Hey chailandau and welcome to the GreenSock forums.

 

Sure, it's definitely possible to create a wiping effect like that with GSAP. If you use your developer tools you can see that that site creates the effect by using big background images with fixed background positioning. The only thing they do with JS is the animation to a particular section.

 

With that being said, if you have a bunch of content (not just an image) you can do the same effect by using clip paths. You can animate those clip paths with GSAP. Most likely you want to use SVG clip paths if you can because they have much better browser support. See the thread below for more info.

 

I highly recommend creating what you need using in a regular GSAP timeline first. Once you have it working the way that you need it to then you can easily hook it up to a ScrollTiggger. 

 

P.S. I hear @Carl is coming out with a sweet new tutorial and helper for creating clip path animations as a part of his Creative Coding Club. Maybe if you sign up he'll give you a sneak peek  No promises though.

[mikel]

Hey @chailandau,

 

This example could give you some inspiration.

 

See the Pen wvzpXRW?editors=0010 by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

 

[chailandau]

Thank you both for your responses! This makes a lot of sense, I should probably figure out the animation first and then add Scroll Trigger. @mikel your solution looks great - my question is, how do I arrange this with a div containing an image, a background image, plenty of text. I would show an example, but it's for a work training project and I don't think I can share my code. It's a three column layout with text on two sides and an image with a background image set behind it. Is that too much content for this effect?

[mikel]

Hey Chailandau,

 

It is not easy to judge which concept makes sense if you do not know the layout and the desired animation processes.
Depending on the layout - e.g. with a lot of text - it might also make sense not to integrate the text part into the SVG.
But that depends.

 

Mikel