Spotlight v2

Spotlight v2 is a nestable block element. It comes with “Spotlight v2 element” nested at it.
Spotlight v2 element can be placed in a block other than Spotlight v2. It has an absolute position so the new parent requires at least a relative position and overflow hidden with the appropiate dimensions to support it.
“Spotlight v2 element” positioning can be changed using left control at it’s Style section. It is auto by default but it can be changed to a fixed value like 100px. It is a common approach to center the spotlight while trying to control an exact position to make the light focus an specific element. To do so, you can introduce this formula at left control: calc(50% – myDimensions / 2). This formula will center Spotlight v2 element at it’s relative parent while resizing it. Then, myDimensions can be changed to any specific value like 350px, 450px, 200px… so it will give you a great control on it’s positioning at any breakpoint.

Spotlight v2 element uses ScrollTrigger Library to reveal on scroll. Learn more about ScrollTrigger here.
From scale: determines the initial scale the spotlight will transform from. The demo is 0.5
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.
Duration
Delay
GSAP easing: you can choose from a wide variety of easings. Learn more about GSAP easings here.
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.

– Tamu