Spotlight v2 is a nestable block element. You can put any elements at it and edit it’s block styles at the Style tab.
Spotlight's position can be changed using left control at the Spotlight group at the Style tab. 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 the Spotlight inside Spotlight v2 element 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 animation uses ScrollTrigger Library to fire on scroll. Learn more about ScrollTrigger here.
From scale: determines the initial scale the spotlight will transform from.
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.
