Formation - Animations

[01/09] Intro & Scroll

VIEWPORT

Animate on View

"Animate when in view: fade in, slide in, blur in, element by element. Use 'both' instead of 'forwards'. Don't use opacity 0."

Key places: Hero Intro

[02/09] Intro & Scroll

VIEWPORT

"Animate when in view: fade in, slide in, blur in, element by element. Use 'both' instead of 'forwards'. Don't use opacity 0."

Key places: Hero Intro

[03/09] Intro & Scroll

VIEWPORT

"Animate when in view: fade in, slide in, blur in, element by element. Use 'both' instead of 'forwards'. Don't use opacity 0."

Key places: Hero Intro

[04/09] Intro & Scroll

VIEWPORT

"Animate when in view: fade in, slide in, blur in, element by element. Use 'both' instead of 'forwards'. Don't use opacity 0."

Key places: Hero Intro

[05/09] Intro & Scroll

VIEWPORT

"Animate when in view: fade in, slide in, blur in, element by element. Use 'both' instead of 'forwards'. Don't use opacity 0."

Key places: Hero Intro

[06/09]

"Add a clip animation to the background, column by column using clip-path."

[07/09]

Prompt

"Add a vertical text clip slide down animation letter by letter."

[08/09] Social Proof

"Add a marquis infinite loop slow animation to the logos using alpha mask."

[09/09] Cards

"Animate the big card to rotate between 3 cards in a loop."

"Add a subtle flashlight effect on hover."