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

Scribble Reveal

Basic
Stacked A
Stacked B
Stacked C
Scratch A
Scratch B
Scratch C
Signature
Circle

How it works

Scribble Reveal is a nestable element that contains a Title and a Scribble. You can set, duplicate and remove at pleasure any amount of Titles and Scribbles at Scribble Reveal element.
Scribble is a title itself and the scribble will fill it’s dimensions, just like the demos, but you can create long headings with prefixes and sufixes by having normal Headings inside Scribble Reveal element and setting the appropiate display settings. Then, Scribble would act as an emphatizer.
Main controls are available at Scribble element.

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 at pleasure.

Animation controls

Type: There are 9 types: Basic, Stacked A, Stacked A, Stacked A, Scratch A, Scratch B, Scratch C, Signature, Circle. Just like the demo.
Duration
CSS easing: you can set any custom CSS easing of your own. Learn more about CSS easings here.

ScrollTrigger controls

Scribble Reveal animation uses ScrollTrigger Library to fire on scroll. Learn more about ScrollTrigger here.
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.
Element: the element that will fire the animation on the additional event selected.

– Tamu

On this page