See the Code - See it Full Page - See Details
Showing first keyframe animation and animating color over step(), then also showing how scrolling through a sprite can be used for seamless background + also parallax with the same animation over different time scales.
This Pen uses: Haml, SCSS, JavaScript, and
See the Code - See it Full Page - See Details
This is a step keyframe animation (like cel) with SVG, put into a large sprite. You can see to eliminate unnessecary code, there is one keyframe instead of many- we don't need anything for "0%", and can cycle through the background with position and step(# of steps)
This Pen uses: Haml, SCSS, JavaScript, and
See the Code - See it Full Page - See Details
Working with a complex SVG sprite animation adjust to the viewport size.
This Pen uses: HTML, SCSS, JavaScript, and
See the Code - See it Full Page - See Details
Demoing how to use font icons in the place of SVG for CSS animations.
This Pen uses: HTML, CSS, JavaScript, and
See the Code - See it Full Page - See Details
Created with SVG and GSAP (Greensock) with the TweenMax and Timeline features. Based off this cartoon I thought was funny on Reddit. http://imgur.com/gallery/jefiHKa
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
Just a fun little low poly landscape with some particle dust for atmosphere.
This Pen uses: HTML, SCSS, JavaScript, and
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
Using skrollr, svg, and some gsap for some fun scrolling halloween stuff with hand drawn elements. Elements change visually with some CSS filters
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
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
With SVG, CSS animation, and GSAP- with motion along a path in GSAP for the fireflies.
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
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
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
Working with a complex SVG sprite animation adjust to the viewport size.
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
There's been a lot of stat data on codepen users data lately, and some people were curious about follower count. @dizzyd did all the hard stuff and heavy lifting of database-scraping, I just presented the data in a silly fun format. Best viewed in Chrome.
This Pen uses: HTML, SCSS, JavaScript, and
See the Code - See it Full Page - See Details
I wanted a way of showing how to do simple tweens, multiple tweens, simple timelines, and multiple timelines by allowing the pen to show how to expand the code. The idea of a self-coding pen inspired by Jake Albaugh and his famous self-coding pen.
This Pen uses: HTML, SCSS, JavaScript, and
See the Code - See it Full Page - See Details
Just a fun little low poly landscape with some particle dust for atmosphere.
This Pen uses: HTML, SCSS, JavaScript, and
