David Khourshid and Stephen Shaw round up to make this circular image transition using CSS masks, some fancy text effects and mouse position tracking with CSS variables.
- โฐ Streamed live on April 15, 2019 at https://twitch.tv/keyframers
- ๐ก Inspiration: https://dribbble.com/shots/6301857-Maxim-Kashin-Architects
- ๐บ Video: https://youtu.be/PDSWq6WaJMk
- ๐ป Code: https://cdpn.io/pen/jRaLgX
Skip around: 1:50 Animation overview 3:06 Start coding 1:03:50 Keyflections
Like what we're doing? There are many ways you can support @keyframers so we can keep live coding awesome animations!
- Support us on Patreon at https://patreon.com/keyframers
- Like & subscribe on YouTube at https://youtube.com/keyframers
- Follow & tweet us at https://twitter.com/keyframers.
- Join the live streams & subscribe on Twitch http://twitch.tv/keyframers
Topics covered:
- CSS transitions
- CSS masks
- CSS Variables for mouse position
A Pen by @keyframers on CodePen.