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 text him. Margaritas are extra points. This game is based on real life events. Someday I'll convert it to ES6.
This Pen uses: HTML, SCSS, Babel, and Babel
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 with the song. The whole animation was inspired by the song by Lucius of the same name.
This Pen uses: HTML, SCSS, JavaScript, and
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 uses: HTML, SCSS, JavaScript, and
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 Bowen. https://tympanus.net/Development/DistortedButtonEffects/
This Pen uses: HTML, SCSS, Babel, and Babel
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 uses: HTML, SCSS, JavaScript, and
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 uses: HTML, SCSS, JavaScript, and
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 many goodies. SVG.
This Pen uses: HTML, CSS, JavaScript, and
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
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 waiting, which becomes a success screen. The animations keep the viewer occupied while the loading happens in the background.
This Pen uses: HTML, SCSS, JavaScript, and
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 fallbacks for graceful degradation. Explained by this blog post: http://codepen.io/sdras/blog/rethinking-information-presentation
This Pen uses: HTML, SCSS, JavaScript, and
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
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 Bowen. https://tympanus.net/Development/DistortedButtonEffects/
This Pen uses: HTML, SCSS, Babel, and Babel
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
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 with GSAP + SVG. Article on how this was made: http://davidwalsh.name/gsap-svg-responsive-animation (my original Huggy Laser Panda Pen is here: http://codepen.io/sdras/pen/MweKRb)
This Pen uses: HTML, CSS, JavaScript, and
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
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 Vue, SVG, GreenSock, and 🤘🏼 The dial was built off of this dribbble shot with minor tweaks: https://dribbble.com/shots/2196737-Day-048-Speedometer and the graphic was a purchased game backround
This Pen uses: HTML, SCSS, Babel, and Babel
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 uses: HTML, SCSS, JavaScript, and
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. https://dribbble.com/shots/2758895-Wall-e Uses Vue, GreenSock, and SVG
This Pen uses: HTML, SCSS, Babel, and Babel
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
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 made this resource to help people find the correct array method a bit more naturally. You can narrow down what you want to do and explore until you find what's most useful to you. All of the code is MIT open source and hosted on github if you'd like to see how this is made: https://github.com/sdras/array-explorer/.
This Pen uses: HTML, SCSS, Babel, and Babel
