Animation on the Cover // Web Animation Course

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