Animation System
Overview
Nectarblocks has a robust system for triggering animations on your elements. You can quickly add common preset animations to your elements, or create your own custom complex animations using an intuitive interface.
The Animation System
When editing any Nectar block which supports the Animation block control, you can find the settings in the sidebar under the section labeled "Animations".
Click on the Add Trigger Type button to add a new animation trigger. You can add one trigger of each type to each element ( Scroll Position / Scroll Into View ). Once a trigger type has been added, the settings for that trigger will slide in.
Trigger Types
- Scroll Into View - This trigger type allows you to trigger a preset animation when the element is scrolled into view (Grow, Slide Fade etc.). The animation will trigger once and will not repeat.
- Scroll Position - Animate between a custom starting and ending state based on the scroll position of the element in the viewport. This option allows you to create custom and complex animations that scrub through as the users scrolls.
📄️ Scroll Into View
The Scroll Into View trigger type allows you to trigger a preset animation when the element is scrolled into view (Grow, Slide Fade etc.). The animation will trigger once and will not repeat.
📄️ Scroll Position
The Scroll Position trigger type enables you to craft a custom animation by defining a Start and End state and smoothly transitioning between them based on the current scroll position.
Beyond the general Animation System, specific Nectar blocks provide their own unique animation settings. For instance, the Text block offers animation settings related to animating each letter individually. Another example includes the Row and Column Blocks, which feature animation settings associated with background layers (such as parallax effects and zoom effects).