Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
chailandau

Scroll Trigger - how do I achieve this wiping effect?

Recommended Posts

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?

Link to post
Share on other sites

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.

  • Like 4
Link to post
Share on other sites

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?

Link to post
Share on other sites

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

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×