Actions are responses to a trigger and have targets they act upon. For instance, actions can include:
You can configure actions to run in sequence or in parallel. Some actions are instantaneous (like adding a class), while others are animated on a timeline.
How to create an action
When you start creating an interaction, choosing an action is one of the first things you’ll do.
- Go to the Interactions panel
- Click New interaction
- Choose your Trigger type
- Choose either a custom action or one of the predefined actions in the modal window
- Customize your trigger targets and action targets as needed
- Click the animation’s name at the top of the panel to customize it
- Set the animated properties associated with your chosen action
If you’d like to add multiple actions to an animation, click the “back” icon next to your action’s name. Then click the “plus” icon and choose your new action, then customize it as needed.
Presets
You can save actions for reuse across your site with presets. This helps to increase consistency and branding across your site. To save an action preset click the “Save as preset” bookmark icon next to the action’s name. Then, you can search for existing presets from the left-hand Interactions manager panel.
Action properties
When you choose either a custom or predefined action, you can customize how you want that action to appear within the animation. For instance, you can make a heading slide in from the left of the viewport and decrease in opacity once it hits the middle of the screen. You could also change the background of an element while rotating it on the X axis.
There are three main types of action properties:
Transform –– changes the size, shape, location, or opacity of an element
Style –– changes the background, border, text, or display type of an element
Class –– adds, removes, or toggles a class on an element
Duration –– the total time of an action
Starting point –– at which time on the timeline the animation starts
Easing –– sets the relative acceleration and deceleration of an action. Without easing, actions start, play, and end at the same speed.
Staggered motion –– whether target elements animate together, the total time from first to last element, or whether there is a delay time between each target element’s action(s)
Repetition –– how many times the action repeats. You can define a precise number of repetitions, set it to “infinite,” or repeat in a back-and-forth manner
To set values for both the beginning and ending of an action, use the Type option. You can set initial element values when From is selected, then set final element values when To is selected.
Animations
Animations are actions involving a visual transition/movement of the target element. They’re built with a timeline that contains one or more tweens. A tween changes a property (like opacity or position) over time.
How to use split text
The split text option lets you break text elements into individual words, lines, or characters for staggered animations. For instance, if you’d like each letter of an H1 to slide in on animation, split text allows you to do that without having to break each letter into a separate element.
How to hide actions
You can hide actions to prevent them from running. Hidden actions are editable and stay in your timeline. They won't play in preview mode or on the published site, but you can toggle them “on” anytime.
To hide an action, click the “eye” show/hide icon next to the action in the Interaction panel. You can also right click an action in the timeline and click show/hide in the modal.
FAQ
Why won’t my element move on the canvas?
If you’re trying to set an action on an element but it’s not moving, you may have the element set to inline. Inline elements don’t work with transform actions.
Why isn’t split text working on my elements?
Balance and justify text may not work with some split text configurations. This is due to the way browsers hand inline block elements.
Why is my animation jumpy?
Avoid combining CSS transitions with GSAP animations on the same element. Also, we recommend using transforms and opacity over layout properties such as width or height.
Why aren’t my 3D animations working?
Make sure the animated elements are inside a container with perspective applied.
Can I use CSS transitions and interactions together?
We don’t recommend you use CSS transitions and interactions together because they may conflict when animating.