Static designs are great, but motion captures attention. In Abyssale, you can transform any design into an animated masterpiece suitable for HTML5 ads, GIFs, or MP4 videos.
To begin, open the Design Builder by creating a new design and look for the Timeline panel at the bottom of your screen. This is where you will orchestrate the movement of your layers.
The Animation Timeline & Keyframes
The timeline is the heartbeat of your animation. It gives you a visual representation of time (from 0 seconds to the end of your video) and allows you to control exactly when and how a layer moves or changes.
Understanding Keyframes
Keyframes are the specific points in time where you define a property of a layer, such as its position, opacity, or size. They act as "anchors" for your animation.
How it works: When you place two keyframes with different values (e.g., Keyframe A at 0% opacity and Keyframe B at 100% opacity), Abyssale automatically "fills in" the transition between them. This process creates smooth movement without you needing to animate every single frame.
Visualizing Keyframes: On your timeline, keyframes appear as small diamond icons on the layer's track.
Adjusting Timing & Speed
You have complete control over the speed and duration of every animation directly from the timeline:
Change Duration: To make an animation faster, drag the two keyframes closer together. To make it slower, drag them further apart.
Change Timing: You can move a set of keyframes left or right along the timeline to delay when an animation starts.
Layer Length: Each layer has a colored bar indicating how long it stays visible. You can drag the edges of this bar to shorten or extend the layer's "life" on screen.
Note: You can manage keyframes by dragging them on the Timeline or by using the Animation Panel on the right side of the screen for precise numerical adjustments.
Defining Total Video Duration
It is crucial to understand that the total duration of your final export is defined by your layers, not by a global setting.
The Rule: The total length of the generated video or animation is automatically set by the specific layer that ends last on the timeline.
Example: If you have an image layer that ends at 5 seconds, but a text layer that extends to 14 seconds, your final exported video will be exactly 14 seconds long.
⚠️ Important: Pay close attention to the length of your layers! If a layer is dragged out longer than necessary, your video might include unwanted static frames or silence at the end. Always resize your layer bars to match the exact duration you want for the final output.
Animation Capabilities & Rules
Constraint: Layer-by-Layer Animation
It is important to note that you cannot animate a Group of layers directly.
The Rule: If you have grouped layers (like a logo and text), you must apply animations to each individual layer within that group.
The Benefit: This actually gives you more creative control, allowing you to "stagger" elements so they don't all appear at the exact same instant, creating a more dynamic effect.
Combining Multiple type of effects on your Animations
You are not limited to just one movement per layer! You can stack multiple types of effects on a single element to create sophisticated effects.
Fade: Control opacity to make elements appear or disappear smoothly.
Scale: Change the size of an object (Grow or Shrink).
Slide: Move elements in any direction.
Rotate: Spin your layers to add a dynamic touch.
Easing: The Secret to Fluid Motion
The difference between a "good" animation and a "professional" one often comes down to Easing.
In real life, objects rarely start or stop instantly at full speed. They accelerate and decelerate. Easing allows you to mimic this natural physics to prevent your animations from looking "robotic" or stiff.
Choosing the Right Easing Style
In the Animation Panel, you can select from three main categories:
1. Linear (No Easing)
Behavior: The movement speed is constant from start to finish.
Best for: Continuous rotations (like a loading spinner) or scrolling tickers where consistent speed is required.
2. Power (Ease In / Ease Out) This is the most common and natural-looking category.
Ease Out: The object starts fast and slows down gently as it stops. Perfect for elements entering the screen.
Ease In: The object starts slowly and speeds up. Great for elements exiting the screen.
Ease In-Out: The object starts slow, speeds up in the middle, and slows down at the end.
3. Back (The "Bounce" Effect)
Behavior: The object moves slightly past its final destination (overshoots) and then settles back into place.
Best for: Buttons, sale badges, or any element that needs to "pop" and grab immediate attention.
Deep Dive: To master these curves and see visual examples, please read our dedicated guide: Understanding and using Easing.
Advanced Layers & Fallback System
Video & Audio Layers
Video Layer: Import MP4 files directly into your design. You can animate the video and sync it with other elements on the timeline.
Audio Layer: Add background music or voiceovers. Use the timeline to sync visual animations perfectly with sound cues.
The Fallback Image
Not every platform supports HTML5 or video (e.g., some email clients). This is where the Fallback Image is essential. In your timeline, you can set a Fallback Frame (marked by a camera icon). Abyssale will capture this specific timestamp as a static .jpg or .png. If the animation cannot play, this image will display instead.
Pro Tip: Always set your fallback frame to a moment where your Call to Action (CTA) and logo are clearly visible!