Style controls

Shimmer Color & Background: defines the color of the shimmer and the background of the badge.

Shimmer Size: the width of the shimmer. It should be shorter than the whole title.

Animation controls

Delay between shimmers: The time to wait between shimmers. Just like a stagger.

Duration

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

How it works

Scroll Reading is not nestable. Set the copy in Content. The effect is achieved thanks to a mask whose dimensions are modified on scroll. There are 2 types available: Fill and Fade.

When Type is Fill, Mask color should match your site’s background to achieve an appropriate Scroll Reading effect. In addition, Mask z-index should be high. Otherwise other elements at the layout could overlap the animation.

Animation controls

Type: Fill or Fade.

Split type: determines how Scroll Reading will be splitted: lines, words or chars. The demo is splitted in lines.

Duration

Mask color: the color of the reading mask. Shown when Type is Fill. It should match your site’s background.

Text opacity: how visible the text stays under the mask. Shown when Type is Fill.

Mask z-index: the stacking order of the mask. Shown when Type is Fill. Keep it high so other layout elements do not overlap the animation.

Initial opacity: the starting opacity of the text before it fades in. Shown when Type is Fade.

ScrollTrigger controls

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. It is specially to control the end of the mask at letters and words.

Scroller: the element that will act as the scrolling viewport. It is the body by default.

Settings controls

Start from: determines the number the Counter will start to count from.

End at: determines the number the Counter will count to.

Thousands separator: to customize the character that will separate thousands.

Decimal separator: to customize the character that will separate decimals.

Animation controls

Duration

Delay

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

ScrollTrigger controls

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

Additional Triggers

Trigger on: click or mouseover.

Element: the element that will fire the animation on the additional event selected.

How it works

Unlike Looping Lines v1, Looping Lines v2 isn’t a nestable element. To add lines to the animation you’ll have to use the Lines repeater control.

Prefix: text shown before the animated box.

Gap: the spacing to be set between the prefix and the lines.

Animation controls

Seconds until next line: the seconds to wait before the current title goes away and the next line comes into view.

Box duration: the duration of the resizing box animation.

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

Custom box easing: used when Box GSAP easing is set to custom.

Swap duration: the duration of the letter swap animation.

Swap stagger: the delay to apply between swap letters.

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

Custom swap easing: used when Swap GSAP easing is set to custom.

How it works

Mask Hover is a nestable element with two slots: Content and Mask. You can place any content you want in them. Visible content must be placed in the Content slot. Content to display on hover must be placed in the Mask slot.

Mask controls

Open in builder: if enabled, the mask layer stays open in the Etch canvas so you can edit it without hovering. It does not affect the frontend.

Type: determines where the mask will come from: From top, From center or From bottom. The demo is from center.

Duration

Ease: you can set any custom CSS easing of your own. Learn more about CSS easings here.

How it works

Blur Reading is not nestable. Set the copy in Content. It includes four different approaches available at the demo. You can easily switch between them using Type.

Animation controls

Type: v1, v2, v3 or v4. The four demo approaches.

Split type: determines how the title will be splitted: words or chars. The demo is splitted in chars.

Blur: determines the blur applied to the text that will animate to 0px. The demo uses 10px.

Stagger: the delay to apply between words or chars. This means, when the first word or char starts animating, the second will fire after “x” seconds determined by the stagger and so on.

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

Custom easing: used when GSAP easing is set to custom.

ScrollTrigger controls

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.

Scroller: the element that will act as the scrolling viewport. It is the body by default.

How it works

Link Preview is not a nestable element. Add, delete and mix paragraphs and links using the Items repeater. Link items contain the link text, URL and the preview image. Paragraph items are plain text around the links.

HTML tag: the wrapper tag for the whole block (p by default). Custom tag appears when HTML tag is set to custom.

Items controls

Type: Link or Paragraph.

Text: the visible link text. Shown when Type is Link.

Href: the URL of the link. Shown when Type is Link.

Target blank: opens the link in a new tab when enabled. Shown when Type is Link.

Image: the image that appears on hover. Shown when Type is Link.

Paragraph: the paragraph text. Shown when Type is Paragraph.

Link hover controls

Color: the color applied to the link text on hover.

Duration: how long the text color transition lasts.

Ease: you can set any custom CSS easing of your own. Learn more about CSS easings here.

Preview animation controls

Fade duration: how long the image takes to fade in and out.

Fade ease: you can set any custom CSS easing of your own. Learn more about CSS easings here.

Transform duration: how long the image takes to move into place on hover.

Transform ease: you can set any custom CSS easing of your own. Learn more about CSS easings here.

Image style

Image size, position and radius live in the Link Preview style, targeting .ne-link-preview__image. This includes the CSS variables –width, –height, –bottom, –hover-bottom and –border-radius.

How it works

Read More is a nestable element. Drag and drop any element inside the content slot. The Read More button is part of the component; its labels are set with Read more text and Read less text.

Content Element controls

Default height to show: the amount of content to show when being collapsed.

Fade height: the hidden content has a progressive fade. This is to set its height.

Fade color: the fade’s color.

Read More button controls

Read more text: the default button text when the content is collapsed. The demo uses Show more.

Read less text: the text to show in the button when the Content is expanded.

Hover color: the button’s color when the Content is expanded.

Hover color duration: the duration of the hover color transition.

Hover color CSS easing: the CSS easing of the hover color transition. Learn more about CSS easings here.

Read More Animation controls

The expanded animation is separated into an “In” and an “Out” transition. Both durations and GSAP easings can be edited here individually.

In duration: the duration of the expand animation.

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

Custom in easing: used when In GSAP easing is set to custom.

Out duration: the duration of the collapse animation.

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

Custom out easing: used when Out GSAP easing is set to custom.

Animation controls

Split type: determines how the title will be splitted: lines, words or chars. The demo is splitted in chars

Blur from: in pixels, the blur applied to the text initially and that will animate to 0px. The demo uses 20px.

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

Blur 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

Trigger on: click or hover.

Element: the element that will fire the animation on the additional event selected.

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.

Duration

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.

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

Trigger on: click or hover.

Element: the element that will fire the animation on the additional event selected.

How it works

Highlight is not a nestable element. Add, delete and customize pieces of text using the Items repeater. Each item can be a Paragraph or a Highlight. The highlight look (background, blend mode, lines and circles) is edited on the Highlight style, targeting .ne-highlight__selectors.

Type: Paragraph or Highlight. Paragraph items render as plain text. Highlight items get the animated mark.

Text: the text of that item.

Selectors controls

All the controls to customize the selectors styles (not the animation) live in the Highlight style. This includes the highlight background, blend mode, and the CSS variables –line-color, –line-width, –circle-color and –scale.

Animation controls

Duration

Delay

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

Custom easing: used when GSAP easing is set to custom.

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.

Additional Triggers

Trigger on: click or hover.

Element: the element that will fire the animation on the additional event selected.

Animation controls

Decode alphabet: the alphabet that will be taken into account when decoding the title. The demo uses the default alphabet.

From: left or right. Where the decode animation will begin. The demo is from left.

Duration

Delay

ScrollTrigger controls

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

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

Trigger on: click or hover.

Element: the element that will fire the animation on the additional event selected.

Disable on scroll: if enabled, the animation will not fire on scroll and will only use the additional trigger selected.

Animation controls

Duration

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

Custom easing: used when GSAP easing is set to custom.

ScrollTrigger controls

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.

Scroller: the element that will act as the scrolling viewport. It is the body by default.

Animation controls

Type: determines how the title will be splitted: lines or words. The demo is splitted in lines.

From: determines where the title will come from: left or right. The demo comes from left.

Unfold intensity: determines the initial perspective applied to each letter to obtain the Unfold effect. The demo uses 300.

Duration

Delay

Stagger: the delay to apply between lines or words. This means, when the first line or word starts animating, the second will fire after “x” seconds determined by the stagger and so on.

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

Custom easing: used when GSAP easing is set to custom.

ScrollTrigger controls

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

Scrub: to attach the animation to the scroll so that it plays when scrolling.

Scroller: the element that will be taken as the scrolling viewport. It is the body by default.

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

Trigger on: click or hover.

Element: the element that will fire the animation on the additional event selected.

Disable on scroll: if enabled, the animation will not fire on scroll and will only use the additional trigger selected.

Underline controls

Type: Side to Side, One Sided, Two Sided and Full Sided. Just like the demo.

Initial width: if an initial underline is required it can be set here.

Thickness: determines the height of the underline. The demo uses 1px.

Bottom distance: determines the spacing between the title and the underline.

Duration

CSS easing: you can set any custom CSS easing of your own. Learn more about CSS easings here.

Animation controls

Decode alphabet: the alphabet that will be taken into account when decoding the title. The demo uses the default alphabet.

From: left or right. Where the decode animation will begin. The demo is from left.

Duration

Delay: the delay before the decode animation starts.

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

Custom easing: used when GSAP easing is set to custom.

Animation controls

Duration

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

Custom easing: used when GSAP easing is set to custom.

Style controls

It is recommended to use a mono font family so that all letters have the same spacing and Arc Title looks symmetric.

Dimensions: the size of the circle.

Letter spacing: the spacing between letters so the circle stays even.

Animation controls

Reverse: if enabled, Arc Title will run backwards.

Duration: Arc Title runs in an infinite loop. Duration will determine the duration of each rotation. This control is available when Scroll is disabled.

CSS easing: you can set any custom CSS easing of your own. Learn more about CSS easings here.

Scroll: if enabled, Arc Title animation will play while scrolling with the corresponding scroll controls set.

Scroll controls

When Scroll is enabled, Arc Title uses ScrollTrigger to rotate on scroll. Learn more about ScrollTrigger here.

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

Scroll end: determines the end of the animation if needed. It is specially useful when using the Scrub property.

Scrub: to attach the animation to the scroll so that it plays when scrolling.

Scroll rotation: the degrees of rotation to apply while scrolling.

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

Animation controls

Stagger: the delay to apply between chars. This means, when the first 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.

Custom easing: used when GSAP easing is set to custom.

Animation controls

Scale: determines the initial scale of each letter. The demo uses 1.2.

Duration

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

Custom easing: used when GSAP easing is set to custom.

ScrollTrigger controls

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

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

Trigger on: click or hover.

Element: the element that will fire the animation on the additional event selected.

Disable on scroll: if enabled, the animation will not fire on scroll and will only use the additional trigger selected.

Gradient controls

Degree: the angle that will serve for the gradient movement. The demo uses 125.

Colors: the title comes with a palette already set. You can set your own using the Colors repeater to create your combination of colors that will be used to generate the gradient.

Prefix: optional text shown before the gradient title.

Suffix: optional text shown after the gradient title.

Animation controls

Duration

Easing: you can set any custom CSS easing of your own. Learn more about CSS easings here.

How it works

Scroll Cascading is not nestable. Set the copy in Content. It multiplies the title by setting different opacities gradually and revealing them on scroll.

Titles number: the number of titles to generate at the cascading, including the default set.

Animation controls

Distance between titles and Scroll units live in the Scroll Cascading style, targeting .ne-scroll-cascading.

Distance between titles: similar to a line-height, this determines the distance between titles. Set it with the CSS variable –leading.

Scroll units: the amount of distance to scroll while Scroll Cascading is pinned. Each scroll unit represents 1 vh. Set it with the CSS variable –scroll.

Style controls

Fill and stroke of the cascading titles also live in the Scroll Cascading style. This includes –color for the last title, and –stroke-width, –hue, –saturation and –lightness for the outlined copies.

ScrollTrigger controls

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.

Scroller: the element that will act as the scrolling viewport. It is the body by default.

How it works

Looping Lines v3 is not a nestable element. To add lines to the animation use the Lines repeater. The element admits a Prefix and a Suffix. The typography of the prefix, lines and suffix can be edited separately as needed.

Blur Animation controls

Blur: the amount of blur to apply to the exchange animation.

Cycle duration: how many seconds a line should remain active.

Blur duration

Blur stagger: the delay to apply to the letters until the next one gets blurry.

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

Custom blur easing: used when Blur easing is set to custom.

Width Animation controls

This animation is applied to the whole Looping Lines v3 element when a line is shorter or larger than the previous one.

Expanding duration: the duration of the width animation.

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

Custom expanding easing: used when Expanding easing is set to custom.

How it works

Looping Lines v1 is not a nestable element. Add, delete and customize lines using the Lines repeater. Lines exchange order will follow the repeater order.

Prefix: optional text prepended to each line.

Link: optional URL for a line. If set, that line renders as an anchor.

Style controls

Line height: the height of each line. The demo uses 30px.

Lines to show: how many lines are visible at once. The demo uses 3.

Align: left, center or right.

Fade mask: if enabled, a fade overlay is applied at the edges of the visible lines.

Fade color: the color used by the fade mask when Fade mask is enabled.

Animation controls

Duration: determines the animation duration of the next title coming into view.

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

Custom easing: used when GSAP easing is set to custom.

Content controls

Sentences: the titles that will be set at the typing animation. If Shuffle is set to false, the order followed when typing will be the order of the titles.

Prefix: optional text shown before the typing animation.

Suffix: optional text shown after the typing animation.

Animation controls

Fire on scroll: if enabled, the typing animation will start when the Typed element enters the viewport.

Type speed: the speed applied when typing. The demo uses 50.

Back speed: the speed applied when deleting letters backwards.

Start delay: determines the delay before starting the typing animation, just like a normal “Delay”.

Back delay: determines the delay before going backwards and start deleting letters. The demo uses 2000.

Shuffle: if enabled, titles set at the loop will be shuffled instead of following an order.

Loop: if there should be at least more than one typing iteration.

Loop count: determines the number of loops before stopping the animation. Use the keyword “Infinity” to loop forever.

Show cursor: if enabled, a cursor character will be displayed to indicate the typing.

Cursor character: the character used as the typing cursor when Show cursor is enabled.

Fade: if enabled, the backwards animation will be replaced by a fade animation.

Fade delay: the delay applied to the fade animation when Fade is enabled.

Animation controls

Type: determines the splitting. Lines, words or chars. Just like the demo.

From: determines where the swap title will come from. Top or bottom. All Swap Titles from the demo come from bottom.

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

CSS easing: you can set any custom CSS easing of your own. Learn more about CSS easings here.

How it works

Dynamic Copyright will keep its year updated automatically. It is especially useful to have the common Copyright badges at the footer up to date.

Prefix: text shown before the year. The demo uses ©.

Suffix: text shown after the year. The demo uses Next Etch.

Animation controls

Perspective: determines the initial perspective applied to the title to obtain the Twist effect. The demo uses 200px.

Duration

ScrollTrigger controls

Twist Reveal animation uses ScrollTrigger Library to fire on scroll. Learn more about ScrollTrigger here.

Start: determines the position of the Twist Reveal element to fire the animation. “top bottom” means when the top of the element hits the bottom of the viewport.

Delay

Replay on enter back: if enabled, the animation will replay each time the Twist Reveal element enters the viewport at the start position selected.

Additional Triggers

Trigger on: click or hover.

Element: the element that will fire the animation on the additional event selected.

How it works

Scroll Gradient is not nestable. Set the copy in Content. It attaches a gradient fade on scroll. Generate your custom linear gradient by adding colors in the Colors repeater.

Color: each item in the Colors repeater is one stop of the gradient.

ScrollTrigger controls

From: Scroll Gradient can be revealed from Bottom or Top. The demo uses from Bottom.

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 how much scroll has to be done until the gradient is completed. The demo uses +=300%.

Animation controls

Letter altitude: determines the distance where the letter will come from. It admits negative values. The demo uses 20px.

Letter rotation: determines the initial rotation applied to each letter. It admits negative values. The demo uses -30.

Duration

Stagger: the delay to apply between chars. This means, when the first char starts animating, the second will fire after “x” seconds determined by the stagger and so on.

ScrollTrigger controls

Letter Launcher 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

Trigger on: click or hover.

Element: the element that will fire the animation on the additional event selected.

Disable on scroll: if enabled, the animation will not fire on scroll and will only use the additional trigger selected.

Highlight controls

Type: Bottom to Full, Full to Bottom, Left to Full and Full to Left. Just like the demo.

Thickness: determines the initial width of the highlight.

Duration

CSS easing: you can set any custom CSS easing of your own. Learn more about CSS easings here.

Animation controls

Type: the animation to apply on hover. Size or Weight.

Proximity distance: the pixels from the title where the proximity animation will start from.

Minimum and Maximum Scale/Weight: at these controls you can define the minimum and maximum values to apply to the selected animation.

Duration

CSS easing: you can set any custom CSS easing of your own. Learn more about CSS easings here.

How it works

Scribble Reveal is not nestable. The scribble wraps Scribble text and fills its dimensions, just like the demos. Use Prefix text to add a heading before the scribble so the scribble acts as an emphasizer.

Include Prefix: if enabled, Prefix text is rendered before the scribble.

Prefix text: plain text before the scribble. Shown when Include Prefix is enabled.

Scribble text: the text the scribble will fill.

Scribble controls

Scribble is an SVG so thickness and color controls are applied to the stroke. Each Scribble positioning and dimensions may vary depending on the type selected. You can adjust them with the width and distance controls.

Type: there are 9 types: Basic, Stacked A, Stacked B, Stacked C, Scratch A, Scratch B, Scratch C, Signature, Circle. Just like the demo.

Stroke width: the thickness of the SVG stroke.

Stroke color: the color of the SVG stroke.

Line width: the width of the scribble. For Circle it sizes the circle.

Line top: the vertical offset of the scribble. For Circle it offsets the circle.

Line left: the horizontal offset of the scribble.

Animation controls

Duration

Ease: you can set any custom CSS easing of your own. Learn more about CSS easings here.

ScrollTrigger controls

Scribble Reveal animation uses ScrollTrigger to fire on scroll. Learn more about ScrollTrigger here.

ScrollTrigger start: determines the position of the Scribble Reveal element to fire the animation. “top bottom” means when the top of the element hits the bottom of the viewport.

Replay on enter back: if enabled, the animation will replay each time the Scribble Reveal element enters the viewport at the start position selected.

Additional Triggers

Trigger on: click or hover.

Click element: the element that will fire the animation on click. Shown when Trigger on is Click.

Hover element: the element that will fire the animation on hover. Shown when Trigger on is Hover.