Animating a Stable Diffusion side project

Frontend First

Ryan tells Sam about a side project of his that involves running the text-to-image deep learning model Stable Diffusion on his laptop in response to web requests. Ryan asks Sam questions about animating this UI, including how to animate indeterminate progress, how to avoid unintentional layout animation, and how to automatically repeat a set of items while scrolling rather than stopping at the end.

Topics include:

• 0:00 - Intro
• 0:24 – Overview of Ryan’s Stable Diffusion project -
• 9:36 – Strategies for animating partially indeterminate progress -
• 18:25 – Brainstorm of the API for the headless version of a partially indeterminate progress Hook -
• 25:32 – Unintentional layout animation during window resize -
• 28:29 – Infinite scrolling of a finite array of items -
• 38:52 – Discussion of the need for more high-level Framer Motion examples -

Links:

• Framer Motion docs