Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Roberto Cantarano

[req] image comparison, need hints to change the squared mask

Recommended Posts

Hello,

i really love that image comparison effect (original codepen included here), but my client want a different mask, not "squared".

He requested a mask similar to this, please go to https://www.apple.com/it/ipad-air and go to the same part where there is a snake mask (i have attached a screenshot).

Some of you can give me some hints? Thanks

snake mask.jpg

See the Pen oNjgEjm by GreenSock (@GreenSock) on CodePen

Link to comment
Share on other sites

Sure thing - first up, you'll want to get the path drawn out

DrawSVG is great for this - 

 

I wouldn't even touch scrollTrigger at this point - just focus on getting the stroke set up properly in an SVG and positioned over the images you want to mask.

Then when you've got the stroke sorted - pop that into a mask

This article will help!

https://www.motiontricks.com/svg-dashed-line-animation/

Once the mask is working hook it up to a scrollTrigger.

Hope this helps!

 


 

  • Like 4
Link to comment
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.
×