Setup
- Add the stack to your project.
- Drag and drop the element or stack that you want animated into the “Drop stacks here” section.
- In the settings panel select an animation type.
The remaining settings are optional for customization. Refer to the Settings Panel section below for a break down of what each one does.
Settings Panel
Type: Choose between 17 different animations.
Speed: Adjust the animation speed in milliseconds.
Stagger: Adjust the total possible time between the first segment animation till the last. 1000ms would mean each segment will animate randomly in between 0 and 1000 milliseconds. Decrease this value to have the segments animate closer together. Note: If the “Target Mode” is set to “Automatic – Whole” this setting controls the delay before the animation instead.
Randomize Order: By default the order in which each segment animates in is random. Disable this option to have the segments load in order from top to bottom & left to right.
Reset when not in view: Enable this option to allow the animation to repeat when the element has come back into view after leaving the browser viewport.
Target Mode:
- Automatic – Segmented: The stack will automatically determine which elements should be segments.
- Automatic – Whole: Removes the segments and animates the element has a whole like a more traditional in view animation.
- Manual – Segmented: The stack will not automatically determine which elements should be segments. You can instead manually choose elements and/or list classes to let the stack know which should be segments.
Custom Elements example: table, hr, span
Classes example: .myClass, .another-class, .third-class