Go behind the scenes of modern motion-driven web design and see how short, seamlessly
looping animations become rich, interactive experiences. In this session, you’ll explore how I
design looping motion assets, optimize them for the web, and composite video directly with
HTML and CSS. Learn how CSS filters, blend modes, and opacity effects are used to integrate
motion naturally into layouts. You’ll also see how motion designers can directly apply their
existing animation skills to create these effects without becoming full-time developers.
What you'll learn:
• How to talk to a web developer
• How to design short, seamless animation loops that feel continuous on the web
• Techniques for preparing motion assets specifically for HTML and CSS compositing
• Best practices for optimizing video loops for performance and fast loading
• How CSS opacity, filters, and blend effects enhance motion without complex code
• Software including After Effects, Blender, Photoshop, Illustrator
Example websites to be discussed:
Adobe MAX
Magical Mythological Menagerie
Pre-conference Lab
https://russellbrown.com/fantasy/
Adobe MAX
Le Cirque Galactique
Pre-conference Lab
https://russellbrown.com/le-cirque/
Creative Trends
La Lucha de la Creatividad
Adobe Mexico Event
https://russellbrown.com/lucha-creativa/
Adobe MAX
Wild West Show
Pre-conference Lab
https://russellbrown.com/wild-west-show/
Adobe MAX Forward into the Past
Pre-conference Lab
https://doc-brown.mymobileevents.com