Animation On the Cover

Animation on the cover brings the first screen to life, giving it a distinctive look and making a first impression of the page
TYPES OF ANIMATION:
Fade in
Element appears from transparency
Fade in Up
Fade in Left
Fade in Right
Zoom In
Element appears through transparency from the bottom
Element appears through transparency from the right
Element appears through transparency from the left
Element gradually appears by zooming in
Element appears through transparency from above
Fade in Down
ANIMATION EXAMPLES
The most common cover animations are the heading, subheading, and buttons
A better path for your business
We provide next-gen technologies
for companies and startups
Subheading — Fade in Up
Duration — 1 sec
Delay — 0.1 sec
Heading — Fade in Up
Distance — 100px
Duration — 1 sec
Subheading— Fade in Up
Duration — 1 sec
Distance — 30px
Delay — 0.1 sec
Heading — Fade in
Duration — 2 sec
Button 1 — Fade in Up
Duration — 1 sec
Distance — 30px
Delay — 0.7 sec
Button 2 — Fade in Up
Duration — 1 sec
Distance — 30px
Delay — 0.8 sec
You will feel at home
A coffee & food corner in the city center.
1423 Hamilton Ave, Cleveland
Our menu
Our contacts
A new pizzeria in the city
1423 Hamilton Ave, Cleveland
Logo — Zoom in
Duration — 1 sec
Scale — 90%
Heading — Fade in Up
Duration — 4 sec
Distance — 100px
Subheading — Fade in Up
Duration — 1 sec
Distance — 50px
Delay — 0.3 sec
Create your new website
Try animation on the cover to create something very special
Start
Subheading — Fade in Up
Duration — 0.9 sec
Distance — 100px
Delay — 0.2 sec
Heading — Fade in Up
Duration — 1.1 sec
Distance — 100px
Button — Zoom in
Duration — 0.9
Scale — 30%
Delay — 1.1 sec
I'm a digital illustrator and motion designer. Check out my portfolio
Subheading — Fade in Right
Duration — 1.4 sec
Distance — 50px
Delay — 0.5 sec
Name — Fade in
Duration — 5 sec
NOUVEAU
NYC online clothing store
Online Store
Subheading — Fade in Up
Duration — 0.6 sec
Distance — 50px
Delay — 0.3 sec
Heading — Zoom in
Duration — 1 sec
Scale — 30px
Button 1 — Fade in Up
Duration — 1.2 sec
Distance — 50px
Delay — 0.4 sec
Handmade Ceramics
SAMMO
We create handmade tableware with love
Heading — Fade in Down
Duration — 1.5 sec
Distance — 150px
Delay — 0.6 sec
Logo — Fade in
Duration — 1.7 sec
Subheading — Fade in
Duration — 1.4 sec
Delay — 1 sec
homearea
TRAVEL THE EARTH TOGETHER
About the project
Button — Fade in Up
Duration — 1sec
Distance — 30px
Delay — 0.6 sec
Logo — Fade in
Duration — 1.5 sec
Heading — Fade in Up
Duration — 1.5 sec
Distance — 100px
Delay — 0.3 sec
Yoga traditions, new methods
Prices
Address
About us
Take a class
Contacts
Title — Fade in Left
Duration — 1.3 sec
Distance — 150px
"Take a class" button — Fade in
Duration — 1.7 sec
Delay — 1 sec
"Contacts" button — Fade in
Distance — 100px
Duration — 1.4 sec
Never
Prices
Address
About us
stop
improving
things
EXPLORE CASE
"Never" — Fade in Right
Duration — 1 sec
Distance — 100px
Delay — 0 sec
"Explore case" — Fade in
Duration — 1.6 sec
Delay — 0.6 sec
"Stop" — Fade in Right
Duration — 1 sec
Distance — 100px
Delay — 0.2 sec
"Improving" — Fade in Right
Duration — 1 sec
Distance — 100 px
Delay — 0.2 sec
"Things" — Fade in Right
Duration — 1.6 sec
Distance — 100px
Delay — 0.4 sec
HEBERT
Biography
Personas
Timeline
INTERVIEW
JULIEN
JULIEN — Fade in Left
Duration — 1 sec
Distance — 100px
Arrow Down — Fade in Down
Duration — 0.5 sec
Distance — 100px
Delay — 1.4 sec
HEBERT — Fade in Left
Duration — 1 sec
Distance — 100px
Delay — 0.1 sec
Interview— Fade in Left
Duration — 0.5 sec
Distance — 100px
Delay — 1 sec
Social media icons — Fade in Down
Duration — 0.5 sec
Distance — 100px
Delay — 1.2 sec
All interviews — Fade in Down
Duration — 0.5 sec
Distance — 100px
Delay — 1.4 sec
Logo, menu items, burger menu — Fade in Left
Duration — 1 sec
Distance — 100px
Delay — 1.7-1.9 sec
All interviews
VIDEO TUTORIAL
How to recreate this animation effect in the Tilda editor