Making The Transition From After Effects To CSS Transitions And Keyframes

Making The Transition From After Effects To CSS Transitions And Keyframes

Websites are looking more and more like mobile apps. Users are also increasingly expecting a more app-like experience. From push notifications to offline mode, native web apps are getting there.

Once web apps function like native apps, the design interactions would also change to address the use case — namely, the ubiquity of animations. Animations drive interactions in all of our favourite apps, from Uber to Lyft and Snapchat to Instagram.

PRACTICAL TECHNIQUES ON DESIGNING ANIMATION

What happens when a button has been activated? Does the user have to wait, not knowing if the form worked? A button with a loader could keep the viewer engaged while data is loaded in the background.Read a related article →

As web developers, we need a good foundation to create animations that are both performant and maintainable, which is paramount to the native web app landscape. We need to be able to go from After Effects to CSS transitions, animations and keyframes.

What Is After Effects?

After Effects is an industry-standard product from Adobe used by graphic and motion designers to key, compose and track animations. It is the de facto tool used by many designers to communicate ideas to a team by exporting the animation layers into an easy-to-visualize sample video, with a reference table of the animation start and end times to accompany it.

Together, the demo video and the reference table give the development team a good baseline for how to implement the animation. The video is used to see the overall picture, while the reference table provides the minute details that make or break the animation interaction.

“You must unlearn what you have learned!” Meet the brand new episode of SmashingConf San Francisco with smart front-end tricks and UX techniques. Featuring Yiying Lu, Aarron Draplin, Smashing Yoda, and many others. Tickets now on sale. April 17-18.

THINGS WE CAN DO WITH AFTER EFFECTS

What we can create with After Effects is limited only by our imagination. It can provide an endless number of post-production effects for an image or video. In the scope of the web, it provides a platform for ideas to be shared.

Demonstration of an animation done using After Effects.

Consider the red ball above. The ball is animated using After Effects to slowly roll to the middle, pause for a second, and then slowly accelerate to exit the viewport. The classic web animations of movement, scaling, rotation and even color change are easily done in After Effects and serve as an instantly generated requirements document (or video or GIF) for the animations to be implemented.

Tools You Need To Get Started

With JavaScript, HTML5, CSS3 and many other languages becoming standard across most major user agents that a website receives traffic from, using these tools wholesale is becoming increasingly feasible. Below are some key technologies to keep in mind when implementing animations.

CSS TRANSITIONS

CSS transitions provide a way to control how fast a change in CSS property is applied to an element. Instead of applying a style immediately (without transitions), it could be applied gradually over a defined acceleration curve using customization rules. An example would be changing a background color from black to white over a period of time.

With this rule on the element, the background color would take three seconds to change, gradually changing from black to white, going through shades of gray. This can further be customized by adding transition-timing-function, to calculate intermediate values, and transition-delay, to delay the start of the animation.

CSS transitions are good for simple interactions, such as changing the background color or moving an element to a new location.

USING CSS ANIMATIONS

CSS animations provide even finer control over the intermediate steps between an animation, using waypoints. Waypoints (or keyframes) are pinned points in time, during the animation, when we apply certain styles to an element. We then use the defined keyframes to lay out what the animation should look like.

Suppose we want an element to animate as a bounce. The element needs to move up, move back to the original position, move back up a little, and then move back to the original position. Using keyframes, we can break down that elastic effect into percentages of time that the animation will take.

As with CSS transitions, there are plenty of options for developers to configure. We can make animations repeat indefinitely using animation-iteration-count, with the value infinite, or even control the direction in which the animation flows, using the property animation-direction. Plenty of CSS animation properties give us fine-grained control to match an animation to the design.

CSS animations are useful for short repeating animations, such as expansion, rotation and bounces.

USING JAVASCRIPT

JavaScript has a multitude of uses, from Raspberry Pi servers to client-side code, but one of its core uses remains changing class names on elements. Changing a class name is a trivial yet effective way to manage the state of an element.

An example is the simple addition of an active class that signals an initially hidden component to start animating. Consider the ball below. We use JavaScript to add a class that triggers the animation using CSS transition properties.

A red ball animates by increasing in size and then decreasing back to its original size.

The first part of this animation can be replicated using a simple combination of HTML, CSS and JavaScript.

When the timeout (of 500ms) expires, a class of active is added to the ball div, which changes the transform property, which then triggers the transition property, which is watching the transform property on the ball element. Changing CSS classes using JavaScript not only helps us to manage the state of a component, but also gives us further control over animations beyond CSS animations and transitions.

Controlling animations using JavaScript is beneficial for managing state, to trigger events based on dynamic factors such as user input or application state.

Is your pattern library up to date today? Alla Kholmatova has just finished a fully fledged book on Design Systems and how to get them right. With common traps, gotchas and the lessons she learned. Hardcover, eBook. Just sayin’.

From Idea To After Effects To CSS And JavaScript

Imagine we had a task in which we had to animate an element on the page. Let’s make this element a red ball. The ball would have to rotate around the page, as well as scale up and down.

After Effects allows us to create mockups of what the interaction would look like when the animation is triggered. The ball in motion below is an example of that. Notice how the red ball first slightly scales up, then begins accelerating around a circular loop and decelerates back into its original position. Only then does the ball scale down to its original size.

A red ball animates by increasing in size, moving around in a circle, and then decreasing back to its original size.

Consider the shift in scale above where the ball grows or shrinks before moving or stopping. This is a tiny feature that the designer has crafted in After Effects and needs to be communicated to the developer clearly so that the minute details are not missed.

That is why some preparation would need to be done before going from After Effects to the developer. We couldn’t simply create a video file of the animation in action, share it with the developer and call it a day.

One way to convey our ideas clearly is to create a spreadsheet detailing the steps needed for the animation. Depending on the complexity of the animation, it could be simple scribbles on a ticket, a text file containing a list or a full-blown spreadsheet.

Twitter Feed

Facebook Like

About Us

We are the creative team of designers. Our target is to provide templates, themes and plugin easily to developers and end users who can customize all the data and design from back-end and manage his/her site by themselves and also provide themes to you below the market rate. And we also provide customized templates to users on your order, you can place your order on request a quote page.