Animationer og motion graphics

Kommunikation og IT A · HTX · A-niveau · Kommunikation og webproduktion (HTX-specifikt)

💻 Animation og motion graphics

CSS-animationer — ingen JavaScript nødvendig:

```css

@keyframes glid-ind {

from { transform: translateX(-100%); opacity: 0; }

to { transform: translateX(0); opacity: 1; }

}

.element {

animation: glid-ind 0.5s ease-out forwards;

}

.knap {

transition: background-color 0.2s ease, transform 0.1s ease;

}

.knap:hover {

background-color: #0055aa;

transform: scale(1.05);

}

```

JavaScript-animationer:

```javascript

function animér() {

x += 2;

element.style.left = x + "px";

if (x < 500) requestAnimationFrame(animér);

}

requestAnimationFrame(animér);

```

GSAP (GreenSock): professionelt JS-animationsbibliotek.

After Effects til motion graphics: keyframes, easing, 3D lag, expressions.

12 animationsprincipper (Disney): squash og stretch, anticipation, staging, follow through.

Læringsmål

• Bygge CSS-animationer med @keyframes og transitions
• Implementere JavaScript-animationer med requestAnimationFrame
• Anvende GSAP til komplekse animations-sekvenser
• Forklare Disneys 12 animationsprincipper

Sådan kan du arbejde med emnet

• Forklar princippet "easing" i animation, og hvorfor det virker mere naturligt
• Beskriv forskellen på 2D- og 3D-animation
• Diskutér hvordan motion graphics kan bruges til at forklare komplekse data

Træningsforslag

• Byg en animeret hero-sektion med CSS @keyframes
• Lav en GSAP scroll-animation der trigger indhold ved scroll
• Analyser en populær webside's micro-animations og beskriv hvad de kommunikerer