Actions
Switch Theme
Getting startedInstallation
Basics
SocialsYouTube
Facebook
Jose Tamu
July 13, 2024 /  Beginner

Blade Reveal

Blade Reveal

Animation controls

Split type: determines how the title will be splitted: lines, words or chars. The demo is splitted in lines.
From: determines where the title will come from: top or bottom. The demo comes from bottom.
Distance: the distance that will be applied at from. It admits negative values. The demo has a 100% distance.
Skew: determines the amount of skew to apply to the title. Learn more about skew here.
Stagger: the delay to apply between lines, words or chars. This means, when the first line, word or char starts animating, the second will fire after “x” seconds determined by the stagger and so on.
Duration
GSAP easing: you can choose from a wide variety of easings. Learn more about GSAP easings here.

ScrollTrigger controls

Blade Reveal 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 the end of the animation if needed. It is specially useful when using the Scrub property.
Delay
Scrub: to attach the animation to the scroll so that it plays when scrolling.
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.

Additional Triggers

In case you need to fire the animation on additional events.
Trigger on: click or hover.
Element: the element that will fire the animation on the additional event selected.

– Tamu

On this page