Animation settings

Fullscreen loader

The fullscreen loader will cover up the entire screen while the page is loading.

If you use this option, make sure to include a way to end the animation (either with auto-hiding or using a bubble workflow to stop the animation once loaded).

Animation options

To see the animation options in action, check out the demo page here.

Animation	Description	Type
Draw	Animates a stroke outline to the SVG	Outline
Draw spin	Animates a stroke outline to the SVG and then spins it 360 degrees	Outline
Jump draw	Draws the stroke of the SVG and then makes it bounce up and down	Outline
Draw sequence	Draws each section of the SVG with a delay between each	Multi-Outline
Sequence draw spin	Same as Draw sequence, but also adds a spin	Multi-Outline
Spin	Spins the SVG 360 degrees	Static
Pulse	Makes the SVG pulse by increasing and decreasing its size	Static
Heartbeat	SVG beats quickly once every second	Static
Jump	Makes the SVG bounce up and down	Static
Jump rotate	Makes the SVG jump and then rotates it on its side	Static

We don't currently offer the option to create your own custom animations, however if you have an idea for an animation you want to add, I'm always looking to add new animation options! To request an animation, make a post on the support forum here.

Controlling your animation with workflows

There are 2 actions available: Animate and control.

Animate

Start your animation. If you have "auto-start" set to false, this is how you can start the animation. You're able to set the animation, stroke, and opacity.

You can define the animation used here - Leave blank to use the default animation. Animation name must be from the list of animations above.

Control

Play, pause, seek, and stop your animation.

Stop after loop: Wait until the animation finishes its current loop, then runs the "finishing animation" set in the settings panel.

Stop now: Does not wait for the loop to finish, and immediately runs the stopping animation. (you can set the animation to "none" to make this immediate)