Custom easing allows you to go beyond the standard presets (Linear, Ease In, Ease Out, Ease In-Out) by defining your own motion curves. This gives you full control over how animations accelerate and decelerate, so you can create unique and branded motion effects.
Important : Custom easing can only be added from the Creative Hub, not from the design editor.
Note : Easings are only available for Slide and Scale animation effects.
Adding a New Easing
Follow these steps to add a new custom easing to your workspace:
Access the Creative Hub: Log in to your Abyssale account and navigate to the Creative Hub page
Add a New Easing: In the Creative Hub, scroll down to the "Manage Easings" section and click the "Add new Easing" button
Define Your Easing: A modal will appear. Here, you can name and define the behavior of your new easing.
Give your custom easing a name, such as "Ease in out Cubic".
Fill in the values for the X1, Y1, X2, and Y2 axes to build your easing. Currently, you cannot build the easing by directly touching the graph.
A preview of the easing will be shown in a graph and a small animation to help you see how it behaves.
Create the Easing: Once you are satisfied, click the "Create easing" button to save it.
A helpful resource for common easing values
If you're looking for common easing values, a great external resource is the Epic Easing website.
You can find a library of popular easing functions with their corresponding X1, Y1, X2, and Y2 values, which you can then copy and paste into Abyssale. This is a quick way to get started with custom easing.
Managing Your Easing
You can edit or delete your custom easings from the Creative Hub.
Edit or Rename an Easing: On the Creative Hub page, click the little pen icon on the right side of the easing you want to modify. You can then edit its name and the coordinates for each axis.
Delete an Easing: Click the three dots "..." icon on the right side of the easing you want to delete. In the dropdown menu, select "Delete" and confirm.
Important : If you delete an easing that is being used in one or more designs, it will still function correctly in those designs. However, it will not be selectable for new designs until you re-add it.
Using Your Custom Easing
Once your custom easing is added, you can apply it to your animated designs.
Select a Layer: While creating or editing an animated design, select the layer you want to animate.
Add an Animation: In the right-hand panel, add a Slide or Scale animation.
Apply Custom Easing: Between the two keyframes in the right panel, select your custom easing from the list to apply it to your animation.
By following these steps, you can easily add, manage, and use your own custom easing in Abyssale. This ensures consistency and makes your animated designs perfectly align with your brand.