The Sticky Animation addon empowers users to effortlessly select one or multiple elements letting it seamlessly "stick" to the viewport as users scroll through the page. Additionally, by utilizing various triggers such as visibility, hover, click, and scroll, users can create captivating animations to enrich their designs.
Adding a Sticky Animation addon
From the Top Menu
Select the element you'll attach the addon to
In the top menu, click on Attach addon to element
Search for and select Sticky Animation
The settings panel will automatically open so you can customize it.
By right-clicking
Right-click the element you want to attach the addon to
Select Addons
Click Add new
Search for and select Sticky Animation
From the Addon tab
Click the element you want to attach the addon to
Click Addon (next to Style) in the right-side panel
Select an addon
Click Apply addon
Tip: A Tape icon will appear next to the element in the layers panel indicating that it's been added.
Configuration options
Sticky Settings
Parameter | Description |
Stick when | Distance to top: Takes the top as the reference for the distance specified in the Stick when distance is field
Distance to bottom: Takes the bottom as the reference for the distance specified in the Stick when distance is field |
Stick when distance is | The pixel distance between the element and the top/bottom that makes it stick to the user's view |
Stick to which layer? | Stick in front: Pins the element in front of all the elements on your page
Stick to current layer: The element will follow the layers panel (left side panel) hierarchy
Stick behind everything: Pins the element behind all of the elements on your page |
How long to stick | Until bottom: The element will be pinned until the page's bottom
Distance: The pixel distance between the element and the top/bottom that unpins the element when reached
To element: Select an element as the reference to unpin the sticky element (you must name the element in the layers panel so that it appears in the list) |
Animation Settings
Animation Types
You'll have the option to select from a number of animations, each of which will be triggered by different events on your website. Read the chart below to learn how they work.
Animation Type | Description |
Load Animation | The animation will be initiated as the page loads |
Click Animation | The animation will be initiated when clicking the element itself or one of the specified triggers in the settings |
Hover Animation | The animation will be initiated when hovering over the element itself or one of the specified triggers in the settings |
Scroll Animation | The animation will be initiated as you scroll on the page |
Animation Presets
You'll be able to choose from a variety of animation presets so you don't have to start from scratch, some of these presets won't be available for certain animation types.
Have a look at the list below to learn what they do.
Preset | Description | Available for |
Slide-in | Brings the element into view by moving it vertically with a fade effect | Load Animation
Click Animation
Scroll Animation |
Slide-in from left | Brings the element into view by moving it horizontally from the left with a fade effect | Load Animation |
Fade In | Makes the element appear smoothly | Load Animation |
Pulsate | Makes the element scale up and down continuously | Load Animation
Click Animation
Hover Animation |
Change bg color | Changes the element background color | Load Animation
Click Animation
Hover Animation
Scroll Animation |
Stagger slide-in | Makes the elements inside a frame slide in vertically and scales them up | Load Animation
|
Scale Up | Makes the element scale-up | Click Animation
Hover Animation |
Fade-in stagger | Makes the elements inside a frame fade-in randomly | Scroll Animation |
You can still tweak the functionality of a preset and add more effects to it.
Custom Presets
You can also make your own animations from scratch by using Animation Effects. You'll be able to add as many effects as you need to make the necessary changes to your element during the animation transition.
There are several available effects and it's important to understand how they work before you start configuring them. Please refer to the section below to learn more about them.
Animation Effects
All of these preset animations are made up of Effects; there are 5 main effects in each animation preset, take a look at them below.
Duration: The duration of the animation
Delay: The interval before the animation starts
Easing: Adjust the acceleration of the animation's transition
Loop: Toggle to make the animation loop continuously
Run once: Toggle to make the animation run only once
You'll find these 5 effects in every preset by default but there will be more depending on which animation preset you have chosen, have a look at the chart below to learn how they work.
Effect | Description | Parameters |
Background | Change the background color of the element | Background color: Choose the color from the color picker |
Border radius | Curve the radius of the element | Border-radius start: The border-radius value when the animation starts
Border-radius end: The border-radius value when the animation ends
|
Color | Change the color of the element | Color: Choose the color from the color picker |
Move Horizontal | Make the element move horizontally | From X: The horizontal position of the element when the animation starts
To X: The horizontal position of the element when the animation ends
|
Move Vertical | Make the element move vertically | From Y: The vertical position of the element when the animation starts
To Y: The vertical position of the element when the animation ends |
Opacity | Change the element's transparency | Opacity Start: The transparency of the element when the animation starts
Opacity End: The transparency of the element when the animation ends |
Rotate | Rotate the element | Rotation: Set how many degrees the element should rotate |
Scale | Make the element scale-up | Scale element: Set how much the element should scale in rems |
Stagger | Make a number of elements fade in/slide in randomly inside a frame | Stagger: The time every element takes to appear in seconds
From: Choose the order the elements should appear based on their position inside the frame (first (top), last (bottom), center) |
Adding an Animation Effect
Click the Transition icon next to the element in the layers panel
Open the settings of your animation
Click on the + Effect button
Select the desired effect
The parameters will display below so you can configure them.
Shared Presets
You can save the settings of an addon and reuse them as many times as needed in your project, follow the steps below to learn how to save them.
Select the element the addon is attached to
Click the Tape icon next to the element in the layers panel
Configure the addon
Click on the + icon at the top of the panel
Write the shared style name
Click on the checkmark to save
Click the No shared addon preset dropdown every time you want to reuse your preset, the name you gave it to it will appear in the list.
Tip: Shared presets will only be available for the specific addon you are working with.
Copy-pasting an addon
You can also copy and paste an addon from one element to another but unlike Shared Presets the settings aren't saved and you'll have to copy the addon from the element it's attached to every time you want to reuse it.
Follow the steps below to learn how to do this.
Select the element the addon is attached to
Click the Tape icon next to the element in the layers panel
Click on the copy-paste icon at the top of the panel
Close the settings panel and select the element into which you want to paste the addon.
Click the copy-paste icon at the top bar
The addon will be added to the element.
Removing a Sticky Animation addon
Select the element the addon is attached to
Click on the Tape icon next to the element in the layers panel
In the settings panel, click on the trash icon on the top right corner
The addon has been removed from the element.