Loading...

Navbar Nudging w/ Chris Coyier | THREEFRAMERS Collaborative Animation Tutorial | @keyframers 2.14.0

2,028 views

Loading...

Loading...

Transcript

The interactive transcript could not be loaded.

Loading...

Rating is available when the video has been rented.
This feature is not available right now. Please try again later.
Published on Aug 13, 2019

Chris Coyier joins David Khourshid and Stephen Shaw put together a sliding navbar animation for the first THREEFRAMERS, three person @keyframers collab!

(NOTE: Chris's audio improves greatly at the 11:44 mark, so skip ahead if you must!)

* โฐ Streamed live on August 12, 2019 at https://twitch.tv/keyframers
* ๐Ÿ’ก Inspiration: https://dribbble.com/shots/6934545-Na...
* ๐Ÿ“บ Video: https://youtu.be/wdCgNoXFsgs
* ๐Ÿ’ป Code: https://cdpn.io/pen/xvoBrx

Skip around:
0:30 Introducing Chris Coyier
4:30 Animation overview
7:25 Start coding
1:09:55 Keyflections
1:15:40 Interview with Chris

Additional Resources:

* Chris Coyier's website https://chriscoyier.net
* CSS Tricks https://css-tricks.com
* CodePen https://codepen.io (Go PRO! https://codepen.io/pro)
* Oops, I Guess We're Full Stack Developers Now https://css-tricks.com/video-screenca...
* Material Design Icons https://materialdesignicons.com
* Keys+Code https://youtu.be/KCpKaBTBHQ8
* Position: Relative https://css-tricks.com/things-it-migh...
* Flipping https://github.com/davidkpiano/flipping
* FLIP Your Animations https://aerotwist.com/blog/flip-your-...
* Animating Layouts with the FLIP Technique https://css-tricks.com/animating-layo...
* Background Attachment Local Scroll Shadows http://lea.verou.me/2012/04/backgroun...

Like what we're doing? There are many ways you can support @keyframers so we can keep live coding awesome animations!

* Support us on Patreon at https://patreon.com/keyframers
* Like & subscribe on YouTube at https://youtube.com/keyframers
* Follow & tweet us at https://twitter.com/keyframers.
* Join the live streams & subscribe on Twitch http://twitch.tv/keyframers

Topics covered:

* Ceramics
* FLIP animations / Flipping
* CSS Variables
* Data Attributes

Loading...

Advertisement

to add this to Watch Later

Add to

Loading playlists...