Shaw 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:

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 !

🖼️ 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:

	<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>

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

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

	<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">

	<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">

	<div id="px-render"></div>

	<textarea id="input">hello</textarea>