Schaunotizen

[00:00:27] Web Animations

Die Wege im Web zu animieren sind vielseitig. Wir beginnen unsere Reise bei den Einstiegsdrogen wie CSS Transitions und Animations, die zwar limitiert, aber doch für viele Dinge schön ausreichend sind. Den weiteren Weg gehen wir zur Web Animations API, sehr ählich zu CSS Animations, aber in JavaScript und deshalb über den property-Animationen erhaben. Wem das nicht ausreicht, kann sich in die weite Welt der SVG und Canvas Animationen trauen, und zahlreiche Tools wie Greensock und ähnliches ausprobieren. Zum Abschluß gehen wir in Richtung Animations-Tools, Export-Möglichkeiten, das CSS Houdini Animation Worklet und geben zahlreiche Resourcen und Erfahrungsberichte. Links gibt’s übrigens eine Menge, deswegen bitte schnell in die nächste Sektion um den zahlreichen Namen zu folgen!

Links

Pratical Web Animation – Script’20

Lisis Vortrag auf der Script’19. Ein prima Überblick mit zahlreichen Beispielen

Awesome Web Animation

Das Infoportal für alle, die animieren wollen. Bücher, Artikel, Tutorials, Tools

Keyframe.rs

Livestreams von Animationsexperten

CSS Animations vs Web Animations API

Wann das eine, wann das andere?

GSAP Codepen Collection

Zahlreiche Pens zu dem auf Greensock basierten Animations-Plugin

GSAP 3

Was kann GSAP 3 eigentlich?

Houdini’s Animation Worklet

Detaillierte Beschreibung auf Googles Webdeveloper Info-Seiten

Tween.js

Tweening in JavaScript

Fabric.js

Eine Zeichenbibliothek für Canvas

Pixel.js

Eine Game Engine für Canvas

Phaser

Noch ein Gaming Framework

Scroll-linked Animation

Ein Proposal zur Animations-API die auf Scroll Offsets reagiert

Spirit

Ein Timeline-Tool für Web Animationen

Tumult Hype

Noch ein Animations-Tool

Lottie

After Effect Animationen exportieren, mobile und im Web verwenden!

Uni Salzburg auf der OTS Conf

Lisis Fachhochschule gut präsentiert

Der Bauer

Vor 20 Jahren im Browser, jetzt als Artefakt auf YouTube

Barcamp: The next Wek

2x im Jahr ein fesches, web-affines Barcamp kurz vor dem wundervollen Salzburg