- 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.
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.
Offset: Adjust the distance from the top of the browser window the animation initializes. 100% will cause the animation to start as soon as it is inside the browser window. 30% will cause the animation to start only when the element is in the top half of the window.
- 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