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.
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)
Last updated