Skip to content

Instantly share code, notes, and snippets.

Shaw shshaw

Block or report user

Report or block shshaw

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
View celebrating-1-000.markdown

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
shshaw / gliding-gallery-simple-image-slider-transitions-keyframers-1-15-0.markdown
Created Jul 17, 2018
🖼️ Gliding Gallery | Simple Image Slider Transitions | @keyframers 1.15.0
View gliding-gallery-simple-image-slider-transitions-keyframers-1-15-0.markdown
View splitting-image.css
.splitting-image img { width: 100%; display: block; }
@supports ( display: grid ) {
.splitting-image {
position: relative;
overflow: hidden;
background-size: cover;
visibility: hidden;
}
@shshaw
shshaw / index.html
Created Jul 11, 2018
💳 Payment Picker, Part 2 | @keyframers 1.14.1
View index.html
<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
shshaw / index.html
Created Jul 6, 2018
Payment Picker | @keyframers 1.14.0
View index.html
<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">
View css-only-calendar-conundrum-keyframers-1-11-0.markdown

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.

@shshaw
shshaw / index.html
Last active Jun 8, 2018
@Keyframes 1.9.4 | Dot Spinner
View index.html
<a href="https://youtu.be/XqWsvQxKNac" target="_blank" data-keyframers-credit style="color: #FFF"></a>
<script src="https://codepen.io/shshaw/pen/QmZYMG.js"></script>
<div class="triangles">
<div class="triangle">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
<div class="triangle -big">
@shshaw
shshaw / index.html
Created Jun 8, 2018
@Keyframes 1.9.3 | Overloadered 4
View index.html
<a href="https://youtu.be/XqWsvQxKNac" target="_blank" data-keyframers-credit style="color: #FFF; text-shadow: 0 1px 0 #000"></a>
<script src="https://codepen.io/shshaw/pen/QmZYMG.js"></script>
<div class="sun">
<svg class="eclipse-container" viewBox="0 0 100 100">
<circle class="eclipse" cx="50" cy="50" r="49" transform="rotate(-90 50 50)" />
</svg>
</div>
@shshaw
shshaw / index.html
Created Jun 8, 2018
@Keyframes 1.8.2 | Overloadered 3
View index.html
<div class="box"></div>
<div class="box"></div>
@shshaw
shshaw / index.html
Created Jun 8, 2018
@keyframers 1.8.1 | Overloadered 2
View index.html
<!--
https://dribbble.com/shots/4434643-Clock-Loader-Interaction
-->
<div class="clock">
<div class="hand hour"></div>
<div class="hand minute"></div>
</div>
You can’t perform that action at this time.