Working with Shared Actions

Shared Actions are an easy way to create reusable actions for things such as animations. Consider this an interaction guide that you can use to apply to multiple elements on your page. This is a quick way to set things up to the specifics that you like but also you can just edit the “master” shared action and have it apply to all shared instances that are using it.

You can access the Shared Actions by clicking on the bolt icon in the left panel. You will be able to see any Shared Actions you created, edit them, rename them and see how many times they’ve been used.

There are 2 ways to create a Shared Action. The first being by using the + icon at the top of the Shared Actions window.

Second, you can directly convert any action you have made in your project into a Shared Action so you can reuse in other places.

Once you’ve setup an action such as an animation that you like, you can use the 3 dots icon to choose the “Convert to shared action” drop-down menu item. This will convert that action and it will now be located in the Shared Action window in case you want to make further edits to it or rename it.

Once it becomes a Shared Action, it will also get the bolt icon in its action button. Also, you will no longer be able to edit it directly from the pop-up. You will have the choice to clone it to make it no longer specifically a Shared Action or you can press the “Edit Shared Actions” button to take you to the Shared Actions window where you can tweak it’s settings.

Shared Actions are great for making sure all your hero sections on each page have the same animation feel or for animating things with scroll triggers so that they all behave the same way. But there is no limit to how you might want to use them and we can’t wait to see what you come up with.