spaceninja + animation + video   9

Building an SVG Animation from Start to Finish, by Sarah Drasner
In this talk, Sarah will start with only an Illustrator document and by the end, make it move! It's not clear what exactly will move and how- this is something she and the audience will discover together. The talk will be completely unique- the plan will not be set in stone. She'll live-code (warts and all) and you'll see her process as she'll animate an SVG in the time allotted. She'll optimize, work with styles, and create an animation with javascript, and even ask for audience participation at times to decide what happens next. Come watch for a one-time show
fridayfrontend  video  svg  animation  vue  javascript 
may 2019 by spaceninja
Even More CSS Secrets
The premise is simple: Ten surprising yet practical things you didn’t know you could do in CSS, live-coded in Lea’s trademark interactive presentation style. This third installment of the series will include new juicy secrets related to CSS Variables, grid layout, variable fonts, blending modes, SVG, and many other things.
fridayfrontend  video  css  blendmodes  svg  emoji  borders  animation  focus-within  variablefonts  flexbox  cssgrid  conic-gradient  gradients 
august 2018 by spaceninja
Behind the Illusions: Impossibly high-performance layout animation by David Khourshid
Have you ever wanted to dynamically animate layouts without sacrificing performance? In this talk, innovative illusions will be revealed that will transform your static user interfaces into lively, intuitive experiences for your users at 60 frames per second. We'll investigate even the most complex animated layouts and discover how certain techniques, such as FLIP, containment, clever transforms, pseudoelements, CSS variables, and more can make layout animations easier and smoother.
fridayfrontend  video  css  layout  animation  performance 
may 2018 by spaceninja
The Shady Web: Using CSS for Good, not Evil, by Heidi Olsen
Navigating the web has turned into a treacherous exercise. Between sidebars, popups, scroll overs, and pre-checked boxes, you have to avoid the content you don’t want to unearth the content you do want. As these practices in distraction and diversion become the norm, marketers are pressured to follow suit. Together we will look at the difference between influencing genuine user behavior and tricking people through the use of CSS patterns and interactions.
fridayfrontend  video  css  animation  ux  ui  design  patterns 
april 2018 by spaceninja
The illusion of life
The 12 basic principles of animation were developed by the 'old men' of Walt Disney Studios, amongst them Frank Thomas and Ollie Johnston, during the 1930s. Of course they weren't old men at the time, but young men who were at the forefront of exciting discoveries that were contributing to the development of a new art form. These principles came as a result of reflection about their practice and through Disney's desire to use animation to express character and personality.
animation  video  cartoons  disney 
january 2018 by spaceninja
12 Principles of Animation
This is my video series highlighting each of the 12 Principles of Animation as described by Frank Thomas and Ollie Johnston in their book "The Illusion of Life".
animation  cartoons  video  disney 
january 2018 by spaceninja
Alice in Web Animations API Land
Animation is back in the web development tool chest! We know of declarative CSS Animations and Transitions and fully featured JavaScript animation libraries like GreenSock, but there's an upcoming third option: the Web Animation API! In this talk Rachel Nabors will take you on a magical journey with Alice from Wonderland to show you how this new API is used to run the CSS Animations in your browser and how you can use it to generate and manipulate animations in your project. Colorful, interactive, useful fun for all disciplines.
fridayfrontend  video  animation  animations  api  css  javascript  browsers 
october 2017 by spaceninja
Why Inline SVG is Best SVG
"SVG is one of the most powerful tools in a front-end developer's arsenal, and while its browser support is excellent, there's enough rough edges that a lot of people consistently reach for an alternative such as icon fonts, static images or CSS-only drawing techniques. In this episode we'll look at what can be achieved by writing SVG by hand, simple effects that can add a lot to an interaction that only need a handful of lines of SVG + CSS. But we'll also consider why it is that Inline SVG, in particular, is so much easier to work with than embedding SVG in other ways."
fridayfrontend  video  svg  inline  animation  css 
december 2016 by spaceninja

Copy this bookmark: