Modal Mitosis 🦠 | CSS-Only Gooey Content Toggle | @keyframers 2.5.0





The interactive transcript could not be loaded.


Rating is available when the video has been rented.
This feature is not available right now. Please try again later.
Premiered May 14, 2019

David Khourshid and Stephen Shaw make a CSS-only stretchy expanding content box using SVG goo filter and a checkbox toggle.

* ⏰ Streamed live on May 13, 2019 at https://twitch.tv/keyframers
* 💡 Inspiration: https://dribbble.com/shots/6358927-Mi...
* 📺 Video: https://youtu.be/Zs-oqUMwKm0
* 💻 Code: https://cdpn.io/pen/YbGbOd

Skip around:
2:10 Animation overview
3:45 Start coding
1:06:50 Keyflections

Additional Resources:

* Gooey UI, Part 1 | Mail State UI Transitions https://youtu.be/D0l9EFWWk9M
* Gooey UI, Part 2 | Mail State UI Transitions https://youtu.be/aPY_1kBxqTs
* Gooey Menu by Lucas Bebber https://codepen.io/lbebber/pen/LELBEo

Like what we're doing? There are many ways you can support @keyframers so we can keep live coding awesome animations!

* 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
* Support us on Patreon at https://patreon.com/keyframers

Topics covered:

* SVG Goo
* CSS Filter
* HTML & CSS Checkbox Toggles
* Offset Animation


When autoplay is enabled, a suggested video will automatically play next.

Up next

to add this to Watch Later

Add to

Loading playlists...