spaceninja + animation   138

Exploring prefers-reduced-motion
Animations and transitions on the web are cool and all, they can make the UI feel snappier and responsive (if used judiciously). However there are problems with motion like this. A whole lot of people are sensitive to motion and you don't want your site to cause motion sickness and dizziness, right?

Luckily, most modern browsers now support prefers-reduced-motion CSS media query. Which means you can skip animations for people who don't want them.
fridayfrontend  css  cssbasics  animation  reduced-motion  accessibility 
yesterday by spaceninja
Staggered CSS Transitions
But what if you had several list items, and you wanted them all to move on hover, but each one offset with staggered timing? The trick lies within transition-delay and applying a slightly different delay to each item.
fridayfrontend  css  cssbasics  animation  transitions  transition-delay 
7 days ago by spaceninja
This Ain’t Disney: A practical guide to CSS transitions and animations
Oh, animation… we want to get it right so badly, don’t we? I mean, does anybody really enjoy a stiff, snappy UI? Can anyone admit they’re not delighted when a component slides into view and appears to slow down before coming to a complete stop? There’s something nice about that. So what is that special touch, and why is it so hard to reproduce?
fridayfrontend  css  cssbasics  animation 
13 days ago by spaceninja
Creating an SVG path drawing animation.
Last week I posted my new logo animation on twitter. Amongst everyone saying a ton of lovely things, (thankyou) there was a resounding cry of "tutorial". So I'm going to try and break it down for you. Hope this helps someone, I had a ton of fun making it!
fridayfrontend  animation  svg  greensock 
13 days ago by spaceninja
Avoid Placeholder Text by Animating Form Labels
We suggest one solution — you can see the code on our CodePen — that includes positioning the label element so that it overlaps the input field. In effect, making the label look like placeholder text. Then when the input receives focus, animate the label element out of the user’s way. Let’s dive into one approach using CSS positioning and transitions:
fridayfrontend  cssbasics  css  forms  accessibility  placeholders  labels  animation 
5 weeks ago by spaceninja
Animating with Clip-Path
clip-path is one of those CSS properties we generally know is there but might not reach for often for whatever reason. It’s a little intimidating in the sense that it feels like math class because it requires working with geometric shapes, each with different values that draw certain shapes in certain ways.

We’re going to dive right into clip-path in this article, specifically looking at how we can use it to create pretty complex animations. I hope you’ll see just how awesome the property and it’s shape-shifting powers can be.
fridayfrontend  cssbasics  css  animation  clip-path 
5 weeks ago by spaceninja
Different Approaches for Creating a Staggered Animation
Animating elements, at its most basic, is fairly straightforward. Define the keyframes. Name the animation. Call it on an element. But sometimes we need something a little more complex to get the right “feel" for the way things move. For example, a sound equalizer might use the same animation on each bar, but they are staggered to give the illusion of being animated independently.
fridayfrontend  css  cssbasics  animation 
8 weeks ago by spaceninja
Movin' Modals Along a Path
Modals always be just appearin'. You might see one once in a while that slides in from one of the edges, or uses some kind of scale/opacity thing to appear from "above" or "below." But we can get weirder than that. Why not have them come in on an offset-path?
fridayfrontend  css  cssbasics  modals  offset-path  animation 
10 weeks ago by spaceninja
Folding the DOM
Today I'd like to leverage that 3D engine to perform a neat trick: folding up an image.
fridayfrontend  cssbasics  css  animation  3d 
12 weeks ago by spaceninja
Scroll animations
In this tutorial we’ll learn how to make use of the requestAnimationFrame as well as Intersection Observer methods to detect when elements are within the viewport of the browser. We’ll introduce a new will-change property and use that to make sure our animations are smooth, and we’ll put these together with some transitions to create animations that are triggered on scroll.
fridayfrontend  cssbasics  animation  requestanimationframe  intersection-observer  will-change  transitions  scroll 
12 weeks ago by spaceninja
CSSFX - Beautifully simple click-to-copy CSS effects
A carefully crafted collection designed with a focus on fluidity, simplicity, and ease of use. Powered by CSS with minimal markup. Completely open source and MIT licensed.
fridayfrontend  css  cssbasics  animation 
may 2019 by spaceninja
Building a pure CSS animated SVG spinner
In this article I’ll show you how to level up your loading indicators with a pure-CSS animated SVG loader inspired by Google’s Chrome and YouTube spinner.
fridayfrontend  css  cssbasics  animation  spinners 
may 2019 by spaceninja
Animating Links
In this tutorial we will learn how we style and animate the underlines on our links, we will combine multiple transitions, group animation keyframes together, and investigate some of the upsides and downsides of using animations instead of transitions.
fridayfrontend  cssbasics  css  animation  links 
may 2019 by spaceninja
Vue.js: Using Vue Router Page Transitions
In this article, I will show you how to convert your awesome Vue.js application into a super super awesome Vue.js application. You’re thinking how this can be done? vue-page-transition is the keyword!
vue  transitions  animation  javascript 
may 2019 by spaceninja
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
Fading out siblings on hover in CSS
That’s the crux of this ‘trick’, we fade out all children when the parent is hovered, and attach another hover handler the child, fading it back in:
fridayfrontend  css  cssbasics  hover  animation 
april 2019 by spaceninja
How to create a multi-line text background effect
In this tutorial, we'll take a look at how to create a hover underline effect that works when your text spans on multiple lines.
fridayfrontend  cssbasics  css  hover  underline  animation  linear-gradient 
april 2019 by spaceninja
Animation Performance 101: Measuring with Dev Tools
In the last part of this series, we’ll take a look at the most important part of performance: how to measure and diagnose bottlenecks. Performance optimizations are meaningless without data! We’ll go through how to analyze using Chrome DevTools*. First, let’s take a look at two tools mentioned in Part 1.
fridayfrontend  cssbasics  animation  css  testing  devtools 
april 2019 by spaceninja
Animating SVG with CSS
Bring static SVGs to life with just a few lines of CSS!
fridayfrontend  css  cssbasics  svg  animation 
april 2019 by spaceninja
Accessibility for Vestibular Disorders: How My Temporary Disability Changed My Perspective
But life would give me a lesson I would probably never learn otherwise: last October, my abled life took a drastic change—I started to feel extremely dizzy, with a constant sensation of falling or spinning to the right. I was suffering from a bad case of vertigo caused by labyrinthitis that made it impossible to get anything done. In my case, it was a little over a month. Here’s what I learned while going through it.
fridayfrontend  accessibility  animation  reduced-motion  readermode  darkmode 
april 2019 by spaceninja
Animation Performance 101: Browser Under the Hood
Your ultimate guide to animation performance — starting from the ground up.
performance  animation 
april 2019 by spaceninja
How we built the fastest conference website in the world
The clickbait headline got you here, so let’s make this worth your while! I have no idea whether this is the fastest conference website in the world but I also don’t know that it isn’t; and I’ve spent a completely unreasonable amount of time trying to make it be the fastest conference website in the world. I’m also the creator of AMP, a web component library for making reliably fast websites, and this website is my playground to try out new techniques for future optimizations that I can apply to my day job. Also, fast websites have better conversion rates, which in our case means: sell more tickets.
fridayfrontend  performance  fonts  css  tachyons  atomic  pwa  serviceworkers  animation 
march 2019 by spaceninja
Portfolio Rework Part 1: Animation, Micro interaction & SVG
Stéphanie reworked her Portfolio and blog in 2018. I (Geoffrey) personally worked on the coding part, but also on the animation and micro-interaction part. And that’s what I want to write about today. Animation can be considered as part of a visual identity. Let’s go through the different little animations and their specificities. I want to share with you some tips, things I learnt before and practiced while creating those interactions, to inspire you.
fridayfrontend  css  animation  svg  ui  ux  design  currentcolor 
march 2019 by spaceninja
Animate a Blob of Text with SVG and Text Clipping
I came across this neat little animation in a designer newsletter. In it, a block of text appears to bleed into view with a swirl of colors, then goes out the same way it came in. It’s a slick effect and one I wanted to recreate in code. The approach I took was to use SVG text as a clip path for an SVG background.
fridayfrontend  css  svg  animation  text  clip-path 
february 2019 by spaceninja
Glorious Demo
The easiest way of creating animations to show your code in action.
code  color  generator  highlight  screenshots  animation  syntax  terminal  carbon 
february 2019 by spaceninja
Slide an Image to Reveal Text with CSS Animations
Pretty neat little animation, right? It’s relatively subtle and acts as a nice enhancement to UI elements. For example, I could see it used to reveal explanatory text or even photo captions. Or, a little JavaScript could be used to fire the animation on click or scroll position to make things a little more interactive.
fridayfrontend  css  cssbasics  animation 
february 2019 by spaceninja
A Detailed Guide to CSS Animations and Transitions
Read along as this is an extensive excerpt covering the basics of CSS animations and transitions that could immensely help you in achieving the same for your business website.
fridayfrontend  css  cssbasics  animation  transitions  transforms  keyframes 
february 2019 by spaceninja
The Many Ways to Change an SVG Fill on Hover (and When to Use Them)
SVG gives us a powerful feature: the ability to manipulate their properties with CSS. Those interactions include changing color on hover states. It sounds like such a straightforward thing here in 2019, but there are actually a few totally valid ways to go about it — which only demonstrates the awesome powers of SVG more.
fridayfrontend  svg  animation  color  hover  fill  css 
february 2019 by spaceninja
Disable animations for users who prefer reduced motion
@media (prefers-reduced-motion: reduce) {
* {
animation: none !important;
transition: none !important;
fridayfrontend  css  accessibility  animation 
january 2019 by spaceninja
Toggling Animations On and Off
In this article, we are going to try to make everyone happy independent of what their views on animations might be. We are going to give our users full control over whether they want to see animations or not, and we are going to do that by employing a few cool technical tricks.
fridayfrontend  css  cssbasics  animation  accessibility 
january 2019 by spaceninja
atlassian/react-beautiful-dnd: Beautiful and accessible drag and drop for lists with React
Drag and drop is an intuitive way of moving and rearranging things. We at Atlassian have recently released react-beautiful-dnd which makes drag and drop for lists on the web more beautiful, natural and accessible.
drag-and-drop  javascript  react  accessibility  animation 
january 2019 by spaceninja
Simple CSS Animation Tutorial
You can animate any CSS property whose physical position, dimensions, angle or color can be changed. Basic animation is surprisingly simple to implement using keyframes.
fridayfrontend  css  cssbasics  animation 
january 2019 by spaceninja
How to animate page transition in React using styled components
While building the next version of RoutePlanGo, I needed a way to animate the page transition when the user navigates to different URLs in the app. RoutePlanGo is built using React and Styled Components and uses React Router for URL handling. This article explains how to use the React Transition Group to implement the page transition animation in the app.
fridayfrontend  react  animation  styled-components  javascript  css 
january 2019 by spaceninja
Animating Between Views in React
You know how some sites and web apps have that neat native feel when transitioning between two pages or views? These animations are the type of features that can turn a good user experience into a great one. But to achieve this in a React stack, it is necessary to couple crucial parts in your application: the routing logic and the animation tooling.
react  animation  javascript  css 
december 2018 by spaceninja
CSS Animation Rocks
Animation using CSS can be overwhelming to learn all at once. This book gives you a solid introduction to the topic, combining theory with practical lessons. You’ll learn how, and why to use animation on your web pages and hopefully be inspired to try it on your own projects!
css  animation  books 
december 2018 by spaceninja
Understanding CSS Animations in Email
In this guide, we’ll explore the pros and cons of using CSS animations in email, as well as the code that powers CSS animations.
css  email  animation 
november 2018 by spaceninja
How to Use the Animation Inspector in Chrome Developer Tools
Next time you’re putting together some CSS3-based animations you might find it helpful to jump into Chrome Developer Tools and take advantage of its animation inspection and tweaking features. In this quick tip we’ll give you a rundown of which animation dev tools are available in Chrome, how to access them, and what they can do for you.
fridayfrontend  css  animation  devtools 
october 2018 by spaceninja
animate.css is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.
css  animation  library  reference 
october 2018 by spaceninja
SVG Marching Ants
Maxim Leyzerovich created the marching ants effect with some delectably simple SVG. Let's break it apart bit by bit and see all the little parts come together.
fridayfrontend  cssbasics  svg  animation 
october 2018 by spaceninja
Motion design doesn't have to be hard
Motion helps make UIs expressive and easy to use. Despite having so much potential, motion is perhaps the least understood of all the design disciplines. This may be due to it being one of the newer members of the UI design family. Visual and interaction design dates back to early GUIs, but motion had to wait for modern hardware to render animation smoothly. The overlap between UI motion and traditional animation also muddies the waters. A lifetime can be spent mastering Disney’s 12 basic principles, does this mean UI motion is similarly complex? People often tell me that designing motion is complicated, or that choosing the right values is ambiguous. I contend that in areas most important to a UI, motion design can and should be simple.
design  animation  material 
october 2018 by spaceninja
The ultimate guide to proper use of animation in UX
While exploring the articles about animation, I found out that almost all of them describe only specific use cases or general facts about animation, but I haven’t come across any article where all rules concerning animation of interfaces would be clearly and practically described. Well, in this article I want to collect all the main principles & rules in one place, so that other designers who want to start animating interfaces don’t have to search for additional information.
fridayfrontend  css  animation  ui  ux  design 
october 2018 by spaceninja
Having fun with link hover effects
A designer I work with was presenting comps at a recent team meeting. She had done a wonderful job piecing together the concept for a design system, from components to patterns and everything in between that would make any front-end developer happy. But there was a teeny tiny detail in her work that caught my eye: the hover state for links was a squiggle.
fridayfrontend  css  underlines  svg  animation  hover 
september 2018 by spaceninja
Splitting is a JavaScript microlibrary with a collection of small built-in plugins designed to split (section off) an element in a variety of ways, such as words, characters, child nodes, and more!
css  javascript  animation  splitting  variables 
september 2018 by spaceninja
Using CSS Clip Path to Create Interactive Effects, Part II
Last time around, we dug into the fundamentals of clipping and how to get started. We looked at some ideas to exemplify what we can do with clipping. We’re going to take things a step further in this post and look at different examples, discuss alternative techniques, and consider how to approach our work to be cross-browser compatible.
fridayfrontend  css  svg  clip-path  clip  masks  animation 
september 2018 by spaceninja
Twitter's "fave" animation
Twitter recently updated the design of their “fave” (also known as “fav”) button, introducing a new animation. Rather than rely on CSS transitions, the animation makes use of a series of images. Here’s how to recreate the animation using the CSS animation steps timing function.
fridayfrontend  css  cssbasics  animation  twitter 
august 2018 by spaceninja
Hamburger Menu Animations
Four different menu animations for menu button toggle between hamburger, cross and back icon.
fridayfrontend  css  cssbasics  hamburger  icons  animation 
august 2018 by spaceninja
Animated SVG Radial Progress Bars
Using a single path SVG, a smidge of CSS, and ~6 lines of JavaScript
css  svg  radial  progress  bars  animation 
august 2018 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
Creating Animated Radial Progress Bars with SVG, CSS and VueJS
There are many ways you can make Radial Progress Bars but I find the easiest is to draw them with SVGs and use Vue (or any other JavaScript libraries) to animate them.
css  cssbasics  vue  javascript  svg  radial  progress  animation  loaders  fridayfrontend 
august 2018 by spaceninja
Flexbox — The Animated Tutorial
In my previous tutorial I dumped all of the flex diagrams in one place to show you flex box bird’s eye view — but it’s not enough. If a picture is worth a thousand words — how many more animation? Flex cannot be efficiently & fully explained by text or static images. To cement your knowledge of flex I created these animated samples.
css  cssbasics  flexbox  grids  layout  animation  fridayfrontend 
august 2018 by spaceninja
Versatile CSS-Only Ripple Effects with Progressive JS Enhancement
Achieve simple lightweight material-design ripple effects using only background properties and css animations, with tutorial and examples.
css  cssbasics  javascript  buttons  ripple  animation  google  fridayfrontend 
july 2018 by spaceninja
Create the Google Button Effect with CSS
The button is flat (it looks like a link) but the animated background effect is so simple and elegant that I can't even explain the feeling; it's almost as though the effect is less "heavy" than a simple text-decoration change.  Let's examine the CSS to make the effect happen!
css  cssbasics  google  buttons  design  animation  fridayfrontend 
july 2018 by spaceninja
4 CSS tricks I’ve learnt the hard way
1) No borders; 2) Animated throbber; 3) Horizontal & vertical centering; 4) Positioning relative to a parent;
css  cssbasics  borders  animation  centered  position  fridayfrontend 
july 2018 by spaceninja
input :not(:placeholder-shown)
If you're getting rid of your `placeholder` attributes, why not consider this clever CSS-only "moving label" pattern?
fridayfrontend  css  forms  labels  placeholder  accessibility  animation 
june 2018 by spaceninja
Making Avengers ID Card In HTML And CSS
In this tutorial, we will build a sci-fi ID card for Avengers. You will learn Flexbox, Nested Flexbox, CSS animations, and a ton of other CSS techniques while building this interesting project.
css  cssbasics  avengers  cards  animation  fridayfrontend 
june 2018 by spaceninja
How to create a simple CSS loading spinner & make it accessible
A loading spinner is a visual indication that something is happening on your webpage. With a few lines of JavaScript and a little extra HTML markup we can ensure that users that have visual impairments are informed that something is happening and when the task has been completed.
css  cssbasics  animation  loaders  spinners  accessibility  fridayfrontend 
may 2018 by spaceninja
Intro to CSS 3D transforms
3D transforms change how we approach blank canvas of web design. Or rather, they change canvas itself, trading in the flat surface for an voluminous installation.
css  cssbasics  3d  transforms  animation  fridayfrontend 
may 2018 by spaceninja
Inspecting Animations in DevTools
I stumbled upon the Animation panel in Chrome’s DevTools the other day and almost jumped out of my seat with pure joy. Not only was I completely unaware that such a thing exists, but it was better than what I could’ve hoped: it lets you control and manipulate CSS animations and visualize how everything works under the hood.
css  cssbasics  chrome  devtools  animation  firefox  fridayfrontend 
may 2018 by spaceninja
SVG Line Animation for Beginners
I love SVG line animation because I think that it looks amazing as an effect, but is also simple enough to grasp that I was able to use it in one of my very first SVG animations.
css  cssbasics  svg  animation  fridayfrontend 
may 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
Creating smooth sequential animations with Sass
In this article I’m going to demonstrate a technique for creating CSS animations using the power of Sass’ for loop. Whether you’re using React, Vue or Angular, these animations can be used in your app.
fridayfrontend  css  sass  animation  performance  sequential 
april 2018 by spaceninja
10 principles for smooth web animations
There is no silver bullet for great animations, besides spending a lot of time testing and optimizing them. However, after years of experimentation and hitting the limits of browser performance, we’ve come up with a series of design & code principles that seem to reliably result in nice animations. These techniques should get you pages that feel smooth, work in modern desktop and mobile browsers, and—most importantly—are easy to maintain.
fridayfrontend  css  animation  performance 
april 2018 by spaceninja
Loaders.css: Delightful, performance-focused pure css loading animations.
A collection of loading animations written entirely in css. Each animation is limited to a small subset of css properties in order to avoid expensive painting and layout calculations.
css  loaders  animation  performance  spinners 
april 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
Getting Started with Transition and Transform In CSS
CSS transitions and transformations are one of my favorite things to work with. I love being able to create cool, simple animations with just a few lines of code. Making fully animated pages without Javascript also appeals to me. It’s perfect for designers just getting into coding because the syntax is simple and concise, with the browser doing most of the work. Without further ado, lets dive in to the syntax and different things you can do with CSS Transition and Transform!
cssbasics  animation  transitions  transforms  css  fridayfrontend 
march 2018 by spaceninja
Your Interactive Makes Me Sick
Given all the work that goes into a powerful piece of journalism—research, interviews, writing, fact-checking, editing, design, coding, testing—is it really in our best interests to end up with a finished product that some people literally can’t bear to scroll through? Taking the time to look at each element from an accessibility standpoint, and ensuring that users can control their own level of engagement with a piece, will make your stories stronger and available to a wider audience of readers.
fridayfrontend  animation  design  accessibility  scroll  reduced-motion 
march 2018 by spaceninja
What Houdini Means for Animating Transforms
I've been playing with CSS transforms for over five years and one thing that has always bugged me was that I couldn't animate the components of a transform chain individually. This article is going to explain the problem, the old workaround, the new magic Houdini solution and, finally, will offer you a feast of eye candy through better looking examples than those used to illustrate concepts.
fridayfrontend  css  animation  transforms  houdini 
march 2018 by spaceninja
Direction Aware Hover Effects
This is a particular design trick that never fails to catch people's eye! I don't know the exact history of who-thought-of-what first and all that, but I know I have seen a number of implementations of it over the years. I figured I'd round a few of them up here.
fridayfrontend  css  animation  hover  javascript  transitions 
february 2018 by spaceninja
Should you use CSS or JavaScript for web animations?
For simple two-state animations, I recommend you use CSS transitions. For more complicated animations, I recommend you use CSS animations or JavaScript.
fridayfrontend  css  javascript  animation 
january 2018 by spaceninja
Making CSS Animations Feel More Natural
If you watch cartoons, you’ll notice that natural movements are often exaggerated, creating a caricature of real life. When done well, this can feel just as natural as something in the real world, with the added bonus of infusing a little charm and character into the animation.
fridayfrontend  css  animation  cartoons 
january 2018 by spaceninja
Animation Principles for the Web
How Disney's 12 Principles of Animation can be applied to web designs.
animation  css  cartoons  disney 
january 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
CSS Glitch Effect
An experimental glitch effect powered by CSS animations and the clip-path property. Inspired by the technique seen on the speakers page of the 404 conference.
fridayfrontend  css  glitch  animation  clip-path 
january 2018 by spaceninja
FLIP Your Animations
Animations in your web app should run at 60fps. Not always easy to achieve that, and it really depends on what you're trying to do, but I'm here to help. With FLIP.
css  animation  performance  60fps  speed  flip  javascript 
december 2017 by spaceninja
Animating Border
"The challenge: building a button with an expanding border on hover. Simple, right? You might be unpleasantly surprised."
fridayfrontend  css  animation  borders  buttons  hover 
december 2017 by spaceninja
Recreating the Apple Watch Breathe App Animation
The Apple Watch comes with a stock app called Breathe that reminds you to, um, breathe. There's actually more to it than that, but the thought of needing a reminder to breathe makes me giggle. The point is, the app has this kinda awesome interface with a nice animation.
fridayfrontend  css  animation  applewatch  breathe 
november 2017 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
Discover the Power of CSS Transforms
With a single line of CSS we can completely reorient any element on our page – we can move it, rotate it, resize it, or send it into another dimension (to an extent). This all comes to us via the transform property. While it is a single property, a lot of functionality is packed into it, and it can be confusing how all its values combine to create its end result. Let’s discuss some of the basics and then dive into a handful of use cases.
fridayfrontend  css  transforms  animation 
september 2017 by spaceninja
Performant Web Animations and Interactions: Achieving 60 FPS
Silky smooth interactions are critical for providing a natural-feeling application. The devil is in the details, and ill-performant web animations feel awkward, “janky”, and, above all, slow. Developers often invest quite a bit of time to reduce first page loads by even a few milliseconds, but forget to consider the impact of the interactions that follow.
fridayfrontend  css  animation  optimization  performance 
august 2017 by spaceninja
« earlier      
per page:    204080120160

related tags

3d  60fps  accessibility  animals  animation  animations  api  apple  applewatch  ascii  astronomy  atomic  auto  avengers  bars  blendmodes  books  border-image  border-radius  borders  box-shadow  breathe  browsers  buttons  calc  carbon  cards  cartoons  centered  checkboxes  checklist  chrome  clip  clip-path  code  color  compositing  conic-gradient  css  css3  cssbasics  cssgrid  currentcolor  darkmode  defer  delay  demos  design  devtools  disney  dnd  drag-and-drop  dropdown  easing  effects  email  emoji  empty  experiments  fill  filter  filters  firefox  first-letter  flexbox  flip  fluid  focus-within  font-weight  fonts  forms  fridayfrontend  galleries  generator  glitch  google  gpu  gradients  greensock  grids  hamburger  hardwareacceleration  highlight  houdini  hover  html  icons  ie  images  inline  inspiration  intersection-observer  iphone  javascript  jquery  keyframes  labels  layout  library  linear-gradient  links  loaders  loading  mac  mariobros  mariokart  masks  material  mediaqueries  modal  modals  netflix  newton  not  nth-child  offset-path  opacity  optimization  outline  outline-offset  parallax  path  patterns  performance  placeholder  placeholders  planets  plugins  png  position  process  progress  pwa  radial  radio  react  readermode  reduced-motion  reference  repaint  requestanimationframe  responsive  ripple  rotation  rpgs  sass  scale  screenshots  scroll  selectors  sequential  serviceworkers  solarsystem  space  speed  spinners  splitting  styled-components  supports  svg  syntax  table-layout  tables  tachyons  terminal  testing  text  text-shadow  transforms  transition-delay  transitions  transparent  twitter  ui  underline  underlines  ux  variablefonts  variables  vertical-align  video  vue  webapps  webfonts  will-change  workflow 

Copy this bookmark: