Skip to content

Instantly share code, notes, and snippets.

🏠
Working from home

Stan Williams stanwmusic

🏠
Working from home
View GitHub Profile
View gsap-rocket.markdown
@stanwmusic
stanwmusic / index.html
Created Jul 1, 2020
Magnetic Hover Interaction
View index.html
<main>
<button>
<ion-icon name="logo-facebook"></ion-icon>
</button>
<button>
<ion-icon name="logo-twitter"></ion-icon>
</button>
<button>
<ion-icon name="logo-instagram"></ion-icon>
@stanwmusic
stanwmusic / index.html
Created Jul 1, 2020
Pasta Menu (GSAP Animation)
View index.html
<div class="body-clone" data-pasta="spaghetti">
<nav class="menu">
<div class="menu__link">
<svg class="menu__link__shape" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 88.35 75.4">
<g id="spaghetti">
<path id="spa-1" class="main-1" d="M44.17,66.83a16.14,16.14,0,0,1-9.53-3.16,13.18,13.18,0,0,0-15.69,0A16,16,0,0,1,2,65a2,2,0,0,1-.78-2.53,1.59,1.59,0,0,1,1.43-1,1.39,1.39,0,0,1,.65.16,13.2,13.2,0,0,0,14-1.08,16,16,0,0,1,19.06,0,13.18,13.18,0,0,0,15.69,0,16,16,0,0,1,19.06,0A13.2,13.2,0,0,0,85,61.6a1.39,1.39,0,0,1,.65-.16,1.58,1.58,0,0,1,1.42,1A2,2,0,0,1,86.33,65a16,16,0,0,1-16.94-1.32,13.18,13.18,0,0,0-15.69,0A16.12,16.12,0,0,1,44.17,66.83Z" />
<path id="spa-2" class="main-2" d="M44.17,42.43a16.14,16.14,0,0,1-9.53-3.16,13.18,13.18,0,0,0-15.69,0A16,16,0,0,1,2,40.59a2,2,0,0,1-.78-2.53,1.59,1.59,0,0,1,1.43-1,1.52,1.52,0,0,1,.65.16,13.22,13.22,0,0,0,14-1.07,16,16,0,0,1,19.06,0,13.18,13.18,0,0,0,15.69,0,16,16,0,0,1,19.06,0A13.22,13.22,0,0,0,85,37.2a1.52,1.52,0,0,1,.65-.16,1.58,1.58,0,0,1,1.42,1,
View index.html
<div class="moon">
<span class="crater"></span>
<span class="crater"></span>
<span class="crater"></span>
<span class="crater"></span>
</div>
<div class="ground">
<div class="rock"></div>
<div class="rock"></div>
<div class="rock"></div>
@stanwmusic
stanwmusic / index.pug
Created Jun 22, 2020
Superstar DJ v3.0 w/ ScrollTrigger 😎 (Scroll to scratch!)
View index.pug
svg.record-player(xmlns='http://www.w3.org/2000/svg' viewBox='0 0 105.25 105.25')
g(transform='translate(310.848 60.185)')
g.frame
rect.frame__shine(width='95.25' height='95.25' x='-305.848' y='-55.185' ry='4.276' fill-rule='evenodd')
path.frame__base(d='M-288.915-55.185v95.25h74.04a4.267 4.267 0 004.276-4.276v-86.697a4.267 4.267 0 00-4.276-4.277z' fill-rule='evenodd')
circle.record-base(cx='-258.223' cy='-7.56' r='39.688' fill-rule='evenodd' fill='red')
g.knob(transform='matrix(-.10538 .05103 -.05305 -.10674 -308.635 40.311)')
ellipse.knob__base(ry='55.325' rx='56.661' cx='-151.007' cy='79.914')
path.knob__shine(d='M-94.346 79.914a56.661 55.325 0 01-8.12 28.538l-48.541-28.538z')
circle.knob__top(r='41.961' cy='79.914' cx='-151.007')
View index.html
<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" viewBox="0 0 100 100">
<defs>
<linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#00bc9b" />
<stop offset="100%" stop-color="#5eaefd" />
</linearGradient>
<linearGradient id="gradient2" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#5eaefd" />
<stop offset="100%" stop-color="#00bc9b" />
</linearGradient>
View css-coffee-machine-bio-recharger.markdown
View advanced-css.markdown

Advanced CSS

Using CSS Grid, mix-blend-modes, and clip paths in order to create interested and unique designs.

A Pen by Stan Williams on CodePen.

License.

View active-table-of-contents.markdown

Active Table of Contents

Table of contents currently browsing section highlighting using IntersectionObserver.

A Pen by Stan Williams on CodePen.

License.

You can’t perform that action at this time.