Clik here to view.
React Game- Elephant Taco Hunt
See the Code - See it Full Page - See Details This game is built with React, SVG, and GreenSock. It's about a hipster elephant who wants to get tacos but his friends keep trying to change plans and...
View ArticleClik here to view.
Turn It Around
See the Code - See it Full Page - See Details Looks best full screen: http://codepen.io/sdras/full/RNWaMX Made with SVGs and GSAP, with audio, using the timeline to make a longer animation that goes...
View ArticleClik here to view.
Example Motion Design Docs
See the Code - See it Full Page - See Details Showing how motion design documentation can communicate branding and a direction for cohesive animation on a site. Illustrations by Kristen Kong. This Pen...
View ArticleClik here to view.
Pool Ripple
See the Code - See it Full Page - See Details Playing with filters to get ripples in water. I learned this from codrop's distorted button effects tutorial, and I think they learned it from Blake...
View ArticleClik here to view.
Example Motion Design Docs
See the Code - See it Full Page - See Details Showing how motion design documentation can communicate branding and a direction for cohesive animation on a site. Illustrations by Kristen Kong. This Pen...
View ArticleClik here to view.
Using Sara Soueidan's Circulus.svg
See the Code - See it Full Page - See Details Showing how to use http://sarasoueidan.com/tools/circulus/ to make a cool and space-efficient menu with animation. With SVG and GreenSock(GSAP) This Pen...
View ArticleClik here to view.
City Construction Site
See the Code - See it Full Page - See Details Get it? Site? oh man. Demos for GreenSock's latest 18.0 release, with stagger cycle and hsl tweens, as well as jQuery3.0 with class operations on SVG. So...
View ArticleClik here to view.
When you're an introvert...
See the Code - See it Full Page - See Details A little fun homage to kindred spirits. With GreenSock and SVG. This Pen uses: HTML, SCSS, JavaScript, and
View ArticleClik here to view.
Form with Animation That Assists in UX
See the Code - See it Full Page - See Details Demo'ing how animation can aid in User Experience. In this case the user knows the submit button functions, then has a loader to let them know they are...
View ArticleClik here to view.
Responsive Animated Infographic.
See the Code - See it Full Page - See Details Demo-ing ways to make information more engaging, rethinking infographics. This is responsive, with some accessible information for screen readers, and...
View ArticleClik here to view.
React Animated Page Transitions
See the Code - See it Full Page - See Details Just a small demo to show a few page transitions in React. Using GreenSock and SVG. This Pen uses: HTML, SCSS, Babel, and Babel
View ArticleClik here to view.
Pool Ripple
See the Code - See it Full Page - See Details Playing with filters to get ripples in water. I learned this from codrop's distorted button effects tutorial, and I think they learned it from Blake...
View ArticleClik here to view.
VelocityJS and SVG Moving Isoscape
See the Code - See it Full Page - See Details First attempts at playing around with VelocityJS using a sample 3D svg This Pen uses: HTML, CSS, JavaScript, and
View ArticleClik here to view.
Responsive Huggy Laser Panda Factory
See the Code - See it Full Page - See Details Click the hotspots to make Huggy Laser Pandas. The factory is animated on click. The animation was made in sections to be reassembled for responsive. Made...
View ArticleClik here to view.
💥 Boom 💥
See the Code - See it Full Page - See Details What I think about when I think about nuclear power races This Pen uses: HTML, SCSS, Babel, and Babel
View ArticleClik here to view.
Vue Time Comparison
See the Code - See it Full Page - See Details Using the browser's native API for .toLocaleTimeString to get rid of libraries like moment.js for world time that respects daylight savings. Made with...
View ArticleClik here to view.
Using Sara Soueidan's Circulus.svg
See the Code - See it Full Page - See Details Showing how to use http://sarasoueidan.com/tools/circulus/ to make a cool and space-efficient menu with animation. With SVG and GreenSock(GSAP) This Pen...
View ArticleClik here to view.
Vue-controlled Wall-E
See the Code - See it Full Page - See Details I found this dribbble shot of Wall-E that I loved, and wanted to see if I could manipulate him with Vue bindings....
View ArticleClik here to view.
💥 Boom 💥
See the Code - See it Full Page - See Details What I think about when I think about nuclear power races This Pen uses: HTML, SCSS, Babel, and Babel
View ArticleClik here to view.
Array Explorer
See the Code - See it Full Page - See Details When I was first learning array methods, I spent a lot of time digging through the docs to find the appropriate one, and I had to search one by one. I...
View Article