Mastering Web Animation with Easing Curves

[ryanbrownhill]

Mastering Web Animation with Easing Curves

Type of Presentation

• [X] Standard Length Talk
• or
• [X] Lightning Talk

  Description

Animation is an essential part of interaction design and development, it is the facial expression of your interface. It has recently been emphasized with the adoption of physics and motion within mobile apps and now web. There is a large need to adopt beautiful animations in the web so our website's react like the interfaces we are so attuned to on our mobile devices.

The answer to creating beautiful animations is within easing curves. Quite often animation is developed last and left to the default easing curves. At the end of this talk you will gain an understanding of how animations and easing curves work within CSS in order to make your interfaces even more fluid and beautiful! I will walk through some of the Sass techniques that I utilize to streamline my animation workflow.

Outline

• Intro
  • Why Animate?
  • What are Easing Curves
  • Why they are important
  • Get rid of extra keyframes
• Structure of CSS Keyframe Animation
  • Basic structure
  • Global Easing Curves
  • Local @keyframes Easing Curves
• Bring this to the next level!
  • Sass timing-function variables
  • Sass @for loop for delaying animations
  • More Sass Math Fun for Animations!

    Bonus Materials

• Article I wrote about Easing Curves
• Article I wrote about After Effects to CSS
• Article on Designing Motion Experiences

  Speaker Info

• Name : Ryan Brownhill
• Location : San Fransisco, CA
• Contact : ryanbrownhill@gmail.com

  Social Media:

• Twitter : @ryan_brownhill
• GitHub : ryanbrownhill
• Blog : ryanbrownhill.github.io
• Portfolio : ryanbrownhill.com

  Bio:

I am Ryan Brownhill! Making the transition to San Fransisco to be a Product Designer at Facebook. I am an alumni from the Savannah College of Art and Design. There I studied Motion Media Design with emphasis in Interaction and Service Design. Recently I have been jumping into the world of Front End Development.

Photo:

[davidkpiano]

I think this would be a great talk! Can/will you also discuss adding easing curves inside of keyframe declarations? I've found that to be super powerful and allow for even greater creativity.

[ryanbrownhill]

@davidkpiano That's the plan, I guess I need to be more clear when I say "global" and "local" above. I will update the wording to be clear. Glad you think this is a good candidate talk! :blush:

[elyseholladay]

Hi Ryan!

Thank you so much for submitting to SassConf this year!

Unfortunately, we weren’t able to select your talk.

We had an incredible number of submissions this year: 81, in fact, enough to fill up over two weeks of Sassy goodness! But we only have two days, and we couldn’t pick everything.

If you have any questions at all about our selection process, your submission, or anything else at all, please reach out: elyse@sassconf.com and I’ll gladly give you more details.

Again, thank you for submitting. It’s people like you, who are willing to put themselves out there and work hard and submit and give talks that make it possible to even have SassConf. I hope you will submit again next year and continue to be part of the Sass community!

See you in November!