shshaw

<a href="https://twitch.tv/keyframers" target="_blank" data-keyframers-credit style="color: #FFF">Watch the @keyframers live, Monday @ 21:00 EST</a>
<script src="https://codepen.io/shshaw/pen/QmZYMG.js"></script>


<div class="lightning-round">
  <span class="text" data-splitting> LIGHTNING ROUND </span>
  <span class="zap" data-splitting>⚡</span>
</div>

shshaw

<div class="text-overlap" data-splitting>Extra<b>v</b>agant</div>

shshaw

<div class="palette" data-cols="10" data-rows="10"></div>

shshaw

(⌐🔴_🔵) Turnable Tables, Part 1 (🔴_🔵¬) | 3D CSS Record Player | @keyframers 1.18.0

Stephen Shaw and a faintly appearing David Khourshid create a 3D turntable with CSS! Control the rotation & open the lid with the power of CSS Variables.

• ⏰ Streamed live on August 13, 2016 at https://twitch.tv/keyframers
• 💡Inspiration: https://dribbble.com/shots/4930227-Vinyls-E-Commerce-App
• 📺 Video: https://youtu.be/tdWxCsAqx7I
• 💻 Code: https://cdpn.io/pen/YjMwqX/

Skip around:

shshaw

Celebrating 1,000!

✅ 1,000 Twitter Followers ✅ 1,000 YouTube Subscribers

Thank you all for your support! 🎉

✍️ Reply with your favorite tips/eps! We'd love to hear what you've learned from the streams ✉️ Sign up at http://keyframe.rs for news about more exciting content coming soon !

shshaw

🖼️ Gliding Gallery | Simple Image Slider Transitions | @keyframers 1.15.0

David Khourshid and Stephen Shaw build a Gliding Gallery, a simple image slider with big transitions.

• ⏰ Streamed live on July 16, 2018 at https://twitch.tv/keyframers
• 💡 Inspiration: https://dribbble.com/shots/4830195-Team-profile-transitions
• 📺 Video: https://youtu.be/DbwdbNi_QUk
• 💻 Code: https://cdpn.io/pen/pZyWPd

Skip around:

shshaw

.splitting-image img { width: 100%; display: block; }

@supports ( display: grid ) {
  .splitting-image {
    position: relative;
    overflow: hidden;
    background-size: cover;
    visibility: hidden;
  }

shshaw

<div class="debug" style="display: none;"></div>

<a href="https://youtu.be/_rKtTIJJaJY" target="_blank" data-keyframers-credit style="color: #000"></a>
<script src="https://codepen.io/shshaw/pen/QmZYMG.js"></script>

<div id="app" data-state="wallet" data-panning="0">
  <header class="ui-header">

  </header>
  <div class="ui-wallet">

shshaw

<div id="app" data-state="wallet">
  <header class="ui-header">

  </header>
  <div class="ui-wallet">
    <h2 class="ui-wallet-heading">
      Wallet
    </h2>
    <div class="ui-cards">
      <div class="ui-card" data-card="AnimEx">

shshaw

CSS-only Calendar Conundrum 📆🤔 | @keyframers 1.11.0

Watch us code this live! https://youtu.be/_8OMGE87e2Q

Challenge Accepted!

David Khourshid and Stephen Shaw rise to the challenge raised on Twitter, recreating an amazing, if not improbable calender UI interaction using CSS only. Will they succeed or fail? Watch to find out!

Streamed live on June 18, 2018.