Jose Tamu
June 25, 2025 /
Beginner /
Light

Highlight

Content tab

How it works

Highlight is a nestable element that contains Text elements and Highlight Marks. You can create and remove these as needed. The settings to customize the following Highlight effect controls can be found at the Highlight Mark element.

Selectors controls

All the controls to customize the selectors styles (not the animation) can be found at the Highlight Mark's element style tab, including the highlight background, blend mode, lines and circles colors and dimensions.

Animation group

Duration
Delay
GSAP easing: you can choose from a wide variety of easings. Learn more about GSAP easings here.

ScrollTrigger group

Scroll Reading animation uses ScrollTrigger Library to fire on scroll. Learn more about ScrollTrigger here.
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.
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.

Style tab

There are 2 groups available to style the root Highlight element: Margin and Size. If you need to apply additional styles, you can do so at the Settings Tab.