Actions
Switch Theme
Getting startedInstallation
Basics
SocialsYouTube
Facebook
Jose Tamu
July 16, 2024 /  Advanced

Lamp

How it works

Lamp’s background should match your site’s background color to achieve an appropriate effect. This is, because Lamp’s light may overflow it’s container. And z-index should be also -1, so that the overflow won’t overlay any of your content.
It is essential to understand that Lamp’s element is made of a wrapper (parent) and several children parts that all together make the lamp, that is absolute. So, the wrapper has it’s own dimensions and the lamp has it’s own ones, that needs to be fixed (in px, em, rem or vw/vh). All of them can be customized at Lamp element’s controls.

Lamp style controls

Angle: determines the opening degree of the light. The demo uses 70
Color: determines the color of the light.
Blur and light intensities: will determine light intensity. The demo uses 0.5 of blur and 1 of intensity

Line style controls

Line height: the height of lamp’s line. The demo uses 1.25px.
Color: the color of lamp’s line.

ScrollTrigger controls

Lamp 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.
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

On this page