Image Reveal v5

Image Reveal v5 reveals an image with a circular THREE.js mask. Set the image and its alt text at the Content tab.

Object fit: object-fit of the image.
Filters: CSS filters applied to the image.
Width: width of the element.
Height: height of the element.

Disable in the Builder: if enabled, the animation will be disabled at the builder.
Duration: duration of the reveal.
Delay: delay before the reveal starts.
GSAP Easing: you can choose from a wide variety of easings. Learn more about GSAP easings here.
Custom easing: used when GSAP easing is set to custom.

Image Reveal v5 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.
End: determines when the animation ends. Use “unset” to ignore it.
Scrub: links the animation progress to the scrollbar. Use 0 to disable it.
toggleActions: determines how the animation is controlled at the 4 toggle places – onEnter, onLeave, onEnterBack, onLeaveBack, in that order.

In case you need to fire the animation on additional events. Click and Hover fire in addition to ScrollTrigger unless Disable on scroll is enabled.
Trigger on: click or hover.
Disable on scroll: if enabled, ScrollTrigger will be disabled and only the additional trigger will fire the animation.
Element: the element that will fire the animation on the additional event selected, passed by it’s classname.

– Tamu