CodePen Chicago

The event was very open ended without a theme but I gave an opening short talk on the Web Animation API and lots of examples using Firefox Nightly for the latest features. All photos and documentation are done by Marvin Cespedes my co-organizer.


Brian Montana presenting the Web Animation API

Brian in front of projectors and the presentation

I gave a talk that covered the Web Animation API(WAAPI), the timing and animation model that power it. Detailed the effect stack rendering, how the composite handles rendering the effect stack and the different properties. The final portion went over particle effects built with WAAPI based on a previous canvas animation.

Web Animation API-llusion of Life: Web Animation API Slides

Particle Things: Web Animation API

WAAPI Controls

Andy presenting student animations

Andy presenting student animations

Andy showed student projects focused on storytelling and how he uses it in the classroom for teaching.

Andy's student collection Animated Storytelling

Ola Giwa presenting CSS animation

Ola presented her pen showing off CSS animation and learning from Rachel Nabors :D

Ola Giwa

Jeremy Kahn showing CodePen as documentation

Screen of Jeremy Kahn's CodePen

Jeremy paired his documentation of his animation framework Shifty with CodePen for the perfect combo!

Jeremy Kahn's documentation for Shifty

Jake Albaugh's pen inspired by Vincent Pantaloni

Jake Albaugh in hoodie presenting his pen

Jake discusses the Lissajous Table and how the speed of the circle determines how it will render the x and y positions in canvas.

John Horton showed off animated SVG

John showing animated SVG

John showed off some in progress SVG animation and discusses how Illustrator was used to build the animations with motion paths.

Stephanie Slattery's Outline Tile Hovers

Stephanie Slattery showing Outline Tile Hovers while holding a microphone

Stephanie showed off a gallery with accessible hidden content that is activated through hover and focus.

Dubi Kaufmann presenting Closed Caption Design

Dubi holding a microphone in front of the audience presenting code

Dubi showed his closed caption design that randomly selects a string to display that replicates the visuals of traditional CC.

Marvin Cespedes shows off SVG animation for Vox

Marvin with microphone presenting his favorite thing, working for Vox!

Marvin showed off a prototype of an SVG animation for Vox Today Explained, new content from Vox Media.

Sean Mann showing off CSS only version of Snake on Planes

Sean talking to the audience while holding a microphone

Sean rebuilt a Chris Gannon pen from SVG animation to CSS animation only, a nice challenge. Includes inputs for manipulating a few values to rotate, depth, etc.

Orville Chomer showing Stargate challenge

Orville in front of his CodePen pen presenting

Orville showed off the CodePen challenge for making a pen related to Stargate using an SVG to show the gate selecting a chevron!

Stargate Command

Jack Doyle(Greensock) showing ExpoScaleEase for infinite zoom

Jack showing an example of ExpoScaleEase pen

Jack showed off an example from a community member and explained the issue with scaling linearly vs exponentially when comparing with the percent of scaling up that he solved.

Photo gallery:

CodePen Chicago 05MAR2018

Thank you for attending!

Thank you to Jones, Lauren, Austin and the rest of the ActiveCampaign team for sponsoring food and their space! Marvin for documenting the event and taking photos :D Austin Andrews for donating 2 Material Design Icon posters AGAIN! And thanks to all of our presenters and the first timers that came up!

If you have any suggestions, feel free to reach out on Twitter or email :D

2,931 1 13