How to make a left to right image reveal using GSAP

[Just_Jack]

Hey folks! Does anyone have an example of a left to right image reveal effect using GSAP? 

[Rodrigo]

Hi,

 

Without a minimal demo or an example is really hard to know exactly what you mean.

 

Maybe clip path could be helpful in this scenario. Here is an example that uses ScrollTrigger, which can be removed super easy in order to use just GSAP:

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

 

In order to create a lateral reveal you only have to change the start and end values. This tool is super helpful for that.

https://bennettfeely.com/clippy/

 

Finally remember that when using clip path with GSAP always express the values in percentage:

gsap.to(image, {
  clipPath: "polygon(0% 100%, 100% 100%, 100% 0%, 0% 0%)"
});

Hopefully this helps.

Happy Tweening!