Image Reveal v2

Image Reveal v2 is made up of a mask and an image. They have separated animations that can be changed in the Animation section.

The image can received an object fit and object position, as well as filters using the filters control.

Direction: determines from where the image will reveal: left, right, top or bottom.
Mask Duration
Mask Delay
Mask GSAP easing: you can choose from a wide variety of easings. Learn more about GSAP easings here.
Image Duration
Image Delay
Image GSAP easing: you can choose from a wide variety of easings. Learn more about GSAP easings here.

Image Reveal v2 animation uses ScrollTrigger Library to fire on scroll. Learn more about ScrollTrigger here.
Trigger: the element that will fire the animation on scroll. Use the keyword “this” to use the element itself as the trigger.
Start: determines the position of the Trigger to fire the animation. “top bottom” means when the top of the element hits the bottom of the viewport.
toggleActions: Determines how the linked animation is controlled at the 4 distinct toggle places – onEnter, onLeave, onEnterBack, onLeaveBack, in that order. “play pause resume reset” will play the animation when entering, pause it when leaving, resume it when entering again backwards, and reset (rewind back to the beginning) when scrolling all the way back past the beginning.

In case you need to fire the animation on additional events.
Trigger on: click or hover.
Element: the element that will fire the animation on the additional event selected.