Animaties

After effects introductie

Get started

CMD + n    New composition

CMD + k    Composition settings

Layers

Soorten lagen

AI - Basis transforms

Keyframes

interpolatie of tweening tussen verschillende keyframe

Keyframes toevoegen

Easing

Easing quick

Animaties

Animeren met een pad

Een lijn animeren

Een lijn animeren

1. Maak een nieuwe compositie
2. Teken een lus met je pentool
3. Open de laag en selecteer Path
4. Klik op Add > Trim Paths

Een lijn animeren

• Open Trim Path. Bij End maak je een nieuwe Keyframe en zet je die op 0. Je maakt een tweede keyframe en plaats die op 100%

• Voeg easing toe: selecteer beide keyframes, rechterklik op de keyframes

Op een pad animeren

Op een pad animeren

• Teken een pad met pentool (G)
• Window > Create Nulls From Paths
• Selecteer je Path en klik Trace Path

Op een pad animeren

• Voeg Trim Path toe aan je line
• Van Trim Path End naar Trace - Progress
• Loop off

Op een pad animeren

• SHIFT inhouden en sleep naar je trace-laag

van Shape naar Path

• Selecteer shape path > Convert To Bezier Path

Animaties

Morph animatie

Morph animaties

Morphen van vaste vormen

We morphen van de ene vorm naar de andere vorm

• Maak meerdere vormen in AE
• Converteer elk pad van elke vorm naar Bezier Path

Morphen van vaste vormen

•  Maak een  path  keyframe voor alle vormen
• klik u om enkel de actieve keyframes te zien
• Kopieer en plak die keyframes van de andere vormen bij de eerste vorm

cmd + c
cmd + v

Morphen naar eigen vorm

Morphen van png naar png

Animaties

Mask a shape

Easy mask on shape

Animaties

Lottie introductie

Lottie website

Animaties

Van SVG tot animatie

Voorbereiding illustratie

Release to Layers (Sequence)

Import AE

Open after effects en importeer illustrator file

Import kind: composition - Footage Dimension: Layer Size

Shapes + animate

Create > Create Shapes from Vector Layer

Installeer Lottie plugin

• Maak een account op https://lottiefiles.com/ 

• Installeer de AfterEffects extension (ga via Creative Cloud naar plugins)

AE settings (1 malig)

• In AE ga naar Preferences

AE Lottie Extension

• In AE ga naar Window Extensions > lotie en Login in Lottie

Exporteer / download 

Download lottie .json file

Webflow

Importeer in webflow en animate while scrolling in view

Lottie: 0%