Skip to content

Instantly share code, notes, and snippets.

@shshaw
shshaw / index.html
Created Aug 5, 2021
React Panning Image Grid, Part 2 | @keyframers 4.7.2
View index.html
<div id="app"></div>
<a href="https://youtu.be/zOGgcd6nkYs" target="_blank" data-keyframers-credit style="color: #FFF"></a>
<script src="https://codepen.io/shshaw/pen/QmZYMG.js"></script>
@shshaw
shshaw / index.html
Created Aug 5, 2021
Sticky Nav example
View index.html
<nav>
<a href="#1">1</a>
<a href="#2">2</a>
<a href="#3">3</a>
<a href="#4">4</a>
<a href="#5">5</a>
</nav>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent bibendum, lorem vel tincidunt imperdiet, nibh elit laoreet felis, a bibendum nisl tortor non orci. Donec pretium fermentum felis, quis aliquet est rutrum ut. Integer quis massa ut lacus viverra pharetra in eu lacus. Aliquam tempus odio adipiscing diam pellentesque rhoncus. Curabitur a bibendum est. Mauris vehicula cursus risus id luctus. Curabitur accumsan venenatis nibh, non egestas ipsum vulputate ac. Vivamus consectetur dolor sit amet enim aliquet eu scelerisque ipsum hendrerit. Donec lobortis suscipit vestibulum. Nullam luctus pellentesque risus in ullamcorper. Nam neque nunc, mattis vitae ornare ut, feugiat a erat. Ut tempus iaculis augue vel pellentesque.</p>
View index.html
<canvas class="webgl"></canvas>
<div class="info">
<svg id="hand" viewBox="0 0 175 200" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M173.272 82.5157C161.668 70.5528 146.803 62.2655 130.526 58.6846C118.575 55.6811 106.321 54.0528 94.0011 53.8313V20.8535C93.8062 15.2638 91.4057 9.97869 87.3246 6.15411C83.2435 2.32953 77.8139 0.276704 72.2233 0.444604C66.6327 0.276704 61.2031 2.32953 57.122 6.15411C53.0409 9.97869 50.6404 15.2638 50.4455 20.8535V83.0757L40.49 73.2446C36.1045 68.9428 30.2064 66.5329 24.0633 66.5329C17.9201 66.5329 12.0221 68.9428 7.63662 73.2446C5.43939 75.3674 3.69046 77.9095 2.49342 80.7204C1.29638 83.5313 0.675563 86.5539 0.667733 89.609C0.553645 95.5326 2.79095 101.26 6.88996 105.538L35.8855 139.885C37.2844 148.66 40.3015 157.1 44.7833 164.773C48.0577 170.674 52.2595 176.011 57.2277 180.578V192.525C57.2082 194.228 57.8424 195.874 58.9999 197.124C60.1573 198.374 61.75 199.133 63.45 199.245H150.001C151.701 199.133 153.294 198.374 154.451 197.124C155.609 195.874 156.243
@shshaw
shshaw / index.html
Created May 24, 2021
React Circular Slider | @keyframers 4.2
View index.html
<!--
1. Slide Navigation
2. Slide Animations with CSS Variables
3. Stat Placement on a circle
-->
<div id="root"></div>
@shshaw
shshaw / index.html
Created May 24, 2021
Scrolly Path with Cassie Evans! | @keyframers 4.1
View index.html
<div id="page">
<header>
<h1 class="page-title">
<div class='revealer'>
<div class='revealer-inner'>Cassie Evans</div>
</div>
<div class='page-title-secondary revealer'>
<div class='revealer-inner'>Keyframers</div>
</div>
</h1>
@shshaw
shshaw / index.html
Created Nov 5, 2020
One-Element Hourglass
View index.html
<div class="hourglass"></div>
@shshaw
shshaw / index.html
Created Jul 17, 2020
Splitting: 3D Clock
View index.html
<div class="clock">
<span class="cog hours tens" data-splitting>0123456789</span>
<span class="cog hours" data-splitting>0123456789</span>
<span class="colon">:</span>
<span class="cog minutes tens" data-splitting>0123456789</span>
<span class="cog minutes" data-splitting>0123456789</span>
<span class="colon">:</span>
<span class="cog seconds tens" data-splitting>0123456789</span>
<span class="cog seconds" data-splitting>0123456789</span>
View machine.js
const STATES = {
AUTHENTICATING: 'AUTHENTICATING',
AUTHORIZED: 'AUTHORIZED',
UNAUTHORIZED: 'UNAUTHORIZED',
STORAGE_FULL: 'STORAGE_FULL',
ERROR: 'ERROR'
};
const EVENTS = {
AUTHENTICATED: 'AUTHENTICATED',
@shshaw
shshaw / index.pug
Last active Jan 3, 2020
Description!!!
View index.pug
h1 hello world
div what's up?
@shshaw
shshaw / blurred-blinds-loader-animation-tutorial-with-backdrop-filter-blur-keyframers-2-13-0.markdown
Created Aug 7, 2019
Blurred Blinds | Loader Animation Tutorial with backdrop-filter: blur | @keyframers 2.13.0
View blurred-blinds-loader-animation-tutorial-with-backdrop-filter-blur-keyframers-2-13-0.markdown