Install tools
npm install
Christopher Robison chrisrobison
🤔
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <h1>Spirals!</h1> |
chrisrobison
/ README.md
Created
November 12, 2021 15:20
— forked from gre/README.md
Boilerplate of a JS1K submission + JSCrush & uglify tools
chrisrobison
/ index.html
Created
July 30, 2021 13:36
Just Another Definition List, Grid, Sass, Responsive
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <section class="dl-blurbs"> | |
| <dl> | |
| <dt>Design</dt> | |
| <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.</dd> | |
| <dt>Develop</dt> | |
| <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.</dd> | |
| <dt>Test</dt> | |
| <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.</dd> | |
| </dl> | |
| <dl> |
A Pen by Christopher Robison on CodePen.
This is a tribute to Studio Ghibli's Exhibition in Paris.
While walking through the exhibit, I learned that the castle in howl's moving castle was actually animated with a computer. I was surprised, and inspired to recreate this famous scene using web technologies that I'm familiar with, allowing the user to control the castle's movement.
I ended up biting off more than I could chew, and spending much longer than I had initially intended.
To achieve it, I cut all of the elements out of the film itself using photoshop to crop certain frames. I then inserted all of the elements directly to the DOM (no canvas) and animated them using GSAP and an epic amount of timelines. The legs' walk cycle were by far the most difficult part. I did not use any other software for the animation, just good old sublime text!
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- originally from https://codepen.io/daniandl/pen/mMQmGV --> | |
| <div class="roulette"> | |
| <div class="wheel spin"> | |
| <div class="arrow"> | |
| </div> | |
| <img src="https://i.imgur.com/N01W3Ks.png"> | |
| </div> | |
| </div> |
chrisrobison
/ back2school-svg-animation-w-anime-js.markdown
Created
January 23, 2021 01:14
Back2School SVG Animation w/ anime.js
A Pen by Christopher Robison on CodePen.
Original artwork by Sailesh Gunasekaran on dribbble
A Pen by Christopher Robison on CodePen.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="seaContainer"> | |
| <div class="submarine__container"> | |
| <div class="light"></div> | |
| <div class="submarine__periscope"></div> | |
| <div class="submarine__periscope-glass"></div> | |
| <div class="submarine__sail"> | |
| <div class="submarine__sail-shadow dark1"> | |
| </div> | |
| <div class="submarine__sail-shadow light1"></div> | |
| <div class="submarine__sail-shadow dark2"></div> |
NewerOlder