L O A D I N G

SNS

MENU

CLOSE

0422-70-3802

C O N T A C T

1

EN

JP

こんにちは!

CONTACT

Please enter the inquiry details, and after reviewing the privacy policy, NEXT STEPSUBMIT to proceed to the confirmation screen.

  • ✳︎Is required.
  • Please contact us with details according to your inquiry.
  • A representative will contact you at 3 business days.
  • Please refrain from making inquiries regarding sales and introductions.

B A C K

✳︎
Inquiry summary
Business Inquiries
Job Opportunities
Other Inquiries
STAYFUL LIFE STORE
✳︎
Your request
Consultation regarding branding
Consultation regarding web production
Consultation regarding graphic design
Other spot request
✳︎
Job category
Developer(Experienced only)
Designer(Experienced only)
Director(Experienced only)
General affairs(Experienced only)
Staff of STAYFUL LIFE STORE
This item cannot be entered.
✳︎
✳︎
✳︎
✳︎
I agree to the privacy policy.
  • STEP01
  • STEP02
  • STEP03

C L O S E

B A C K

S U B M I T

N E X T S T E P

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 Staff

SHARE

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.

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'
}

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 Staff

SHARE

OTHER ARTICLES

BLOG
May.31.2017

GIVE A LITTLE EXTRA IN YOUR OMOTENASHI

by Maho Noda

BLOG
Sep.15.2017

STUDY CASE: INTERSECTION OBSERVER

by Staff

TOPIC
Jan.20.2017

Published in ANNUAL OF WEB PRODUCTIONS'17

by Staff

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