L O A D I N G

SNS

MENU

CLOSE

0422-70-3802

C O N T A C T

1

EN

JP

こんにちは!

CONTACT - STEP01

Please select a line of inquiry from the following.

BUSINESS INQUIRIES
JOB OPPORTUNITIES
OTHER INQUIRIES

CONTACT - STEP02

Please select your request from the following.

BRANDING
DIRECTION SERVICE
CREATIVE SERVICE
DESIGN SERVICE
TECHNICAL SERVICE

CONTACT - STEP03

Please select a budget from the following.

APPROXIMATE BUDGET
0 $
0 $
~
15000 $
~
30000 $
~
45000 $
~
60000 $
~
75000 $

CONTACT - STEP04

Please select the project release date from the following.

ESTIMATED TIMELINE
0 month
0 month
~
1 month
~
2 month
~
3 month
~
4 month
~
5 month
~
6 month

CONTACT - STEP05

Please enter the project information on the form below,
 and after reviewing the privacy policy, proceed to the confirmation screen.

NAME ✳︎
COMPANY ✳︎
E-MAIL ✳︎
TEL ✳︎
INQURY CONTENT ✳︎

CONTACT - STEP02

Please select a job type from the following.

DIRECTOR
DESIGNER
DEVELOPER
OTHER

CONTACT - STEP03

Please select your years of experience from the following.

YEARS OF EXPERIENCE
1 year
0 year
~
1 year
~
2 year
~
3 year
~
4 year
~
5 year
~
6 year
~
7 year
~
8 year
~
9 year
~
10 year

CONTACT - STEP04

Please select your preferred employment form from the following.

REGULAR EMPLOYEE
CONTACT EMPLOYEE

CONTACT - STEP05

Please state the reason for your application in the form below.

NAME ✳︎
ORGANIZATION ✳︎
E-MAIL ✳︎
TEL ✳︎
URL ✳︎
INQURY CONTENT ✳︎

CONTACT - STEP02

Please enter the relevant information on the form below, and after reviewing the privacy policy, proceed to the confirmation screen.

NAME ✳︎
ORGANIZATION ✳︎
E-MAIL ✳︎
TEL ✳︎
INQURY CONTENT ✳︎
STEP01

C L O S E

S U B M I T

CONTACT COMPLETE

Thank you for your inquiry.
You will receive a reply as soon as we confirm the details of your inquiry.

THANK YOU
CLOSE

NEWS

BLOG Feb.15.2018

I Tried Web Animations API

by Hirokazu Goto

SHARE

Hello everyone, I am Goto, the developer of UNIEL.

I have been coming across with articles about Web Animations API these days, so I decided to write about my review on it here as well.

What Is Web Animations API?

There are several ways to implement animation on browser. Each of them have their pros and cons, so we needed to learn how to write structures with each methods.

  1. CSSTransition
  2. CSSAnimations
  3. JavaScript DOM
  4. JavaScript Library (eg. TweenMax and Velocity)

Although it is still at its experimental stage, Web Animation API is a new, easy way to describe animation and is a combination of the advantages of the conventional ways mentioned above.

※You can check the browser compatibility in the link below (last updated on 1 Feb, 2018.)
https://caniuse.com/#feat=web-animation

How To Use It

//Select the target DOM
let element = document.querySelector('.element');

//Specify how you want to move animation in 1st argument.
//Specify options in 2nd argument.You set the duration to offset here.
let animationObject = v([
{ opacity: 0, offset: 0},
{ opacity: 0.5, offset: 0.3},
{ opacity: 1 offset: 1}
], 3000);

offset is % for @keyframes CSS. Here is an equivalent CSS Keyframe animation for comparison’s sake.

@keyframes Animation {
0% {opacity: 0;}
30% {opacity: 0.5;}
100% {opacity: 1;}
}

Then choose the value with option function

let options = {
iterations: Infinity,
iterationStart: 0,
delay: 0,
endDelay: 0,
direction: 'alternate',
duration: 700,
fill: 'forwards',
easing: 'ease-out'
}

offset is % for @keyframes CSS. Here is an equivalent CSS Keyframe animation for comparison’s sake.

@keyframes Animation {
0% {opacity: 0;}
30% {opacity: 0.5;}
100% {opacity: 1;}
}

Then choose the value with option function

let options = {
iterations: Infinity,
iterationStart: 0,
delay: 0,
endDelay: 0,
direction: 'alternate',
duration: 700,
fill: 'forwards',
easing: 'ease-out'
}

For more detailed examples, you can check out the website below;

W3C Web Animations
https://www.w3.org/TR/web-animations-1/

Too long to read everything on there? There is a short version available here;

CSSAnimations vs Web Animations API
https://css-tricks.com/css-animations-vs-web-animations-api/

Control Timeline

You are able to control timeline (play, pause, reverse) which you can not do with @keyframes and fromTo with Web Animations API.

I checked the elements for the animation with DevTool. You can see how the style remains unchanged.

Summary

I’ve only had a few experiments with this tool so far, but these are the advantages that I’ve found;

  • No need to use library as it works well with the default features of the browser (Although polyfill is still needed at this stage.)
  • Capable of controlling timeline which CSSAnimation cannot do
  • Supports SVG

It might be useful to use along with other methods such as CSS, requestAnimationFrame and TweenMax (if they have the browser support.)Like Web Animations API and observableAPI (API to control scroll and resize) for examples, there are many APIs coming to browsers. Using some of them would surely be helpful.

So yeah, this is my overall impression on Web Animations API.

Bye!

by Hirokazu Goto

SHARE

OTHER ARTICLES

TOPIC
Jun.13.2017

Hold the Oyakomonodukuritaiken

by Staff

TOPIC
Aug.02.2017

HOLIDAY NOTICE

by Staff

BLOG
Sep.15.2017

STUDY CASE: INTERSECTION OBSERVER

by Hirokazu Goto

SCROLL TO
CLICK TO
N E W S   A L L
TAP TO NEWS ALL