[01/08] // SYS.INIT

Gemini 3 Animations

The best model at creating animations. It's not even close.

Author @MengTo

[02/08] 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

[03/08]

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

[04/08] Interaction

"Add a 1px border beam animation around the pill-shaped button on hover."

[05/08]

Prompt

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

[06/08] Social Proof

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

[07/08] Cards

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

"Add a subtle flashlight effect on hover."

[08/08]

Gemini 3 relies heavily on good prompting, ideally with image or code.

Meng To

Design Engineer