Animations help bring your designs to life. You can apply ready-to-use presets or customize transitions for full creative control. This guide covers animation presets, ease and tween types, direction settings, and alpha adjustments.
Animation Presets
Each element in your design can be animated using transitions like:
Alpha
Blur
Slide
Scale
Roll
Zoom
Flip
Rotate
To make things easier, you’ll find 25+ animation presets ready to apply to any element. These presets let you instantly animate designs without additional setup.
Creating Custom Animations
If you want more control over how animations behave, you can customize transitions.
Example: Slide Animation
The Slide transition includes three effect variations:
Normal – standard movement.
Bounce – adds elasticity with a spring-like motion.
Elastic – creates a stretched, rubber-band effect.
These variations are also available in Scale animations, giving you flexibility in how elements appear on the canvas.
Ease Types and Tween Types
Ease Types
Ease types determine how speed changes during an animation.
Normal (logarithmic) – starts slow and accelerates at the end.
Exponential – very fast acceleration.
Gradual – more linear, steady speed.
Tween Types
Tween types adjust how the animation accelerates or decelerates over time. Options include:
Sine
Linear
Quadratic
Cubic
Quartic
Quintic
Exponential
Circular
Strong
Back (adds a rebound effect at the end).
These can create subtle or dramatic differences depending on the transition type used.
Direction and Offset
You can control the direction of an animation, including setting a custom angle.
Direction – determines where the animation starts (e.g., left, right, top).
Offset – sets the starting distance in pixels relative to the element’s position.
For example, placing an element in the lower right corner and setting an offset of 300px will slide the element across the full 300px width of your design.
Alpha Settings
Alpha controls transparency at the start of the transition:
Set to 0: the element starts fully transparent and fades in.
Set higher: the element begins more visible and solidifies faster.
This is especially useful for smooth fade-in effects.
Ready to start designing?
👉 Sign up for a free Bannersnack account – it only takes a minute.
👉 Already have an account? Log in here to continue where you left off.