Image Reveal v6

Image Reveal v6 reveals an image through a pixel grid. Set the image and its alt text at the Content tab. Click and Hover additional triggers fire in addition to ScrollTrigger unless Disable on scroll is enabled.

Width: width of the element.
Height: height of the element.
Radius: border radius of the element.
Pixel tint: color tint of the pixels before the image is revealed.
Grid size: number of pixels on the grid.
Filters: CSS filters applied to the image.

Disable in the Builder: if enabled, the animation will be disabled at the builder.
Direction: direction of the pixel reveal: up, down, left or right.
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 v6 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