Scribble Reveal
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