Workaround for an error that occurs when specifying only one animation property in Web Animation API’s Polyfill

When using the Web Animation API Polyfill (especially iOS 12, etc.) and only one animation property is specified, an error occurs and the console outputs [object Object Object].

For example, the following code would cause the error

layer1.animate( 
 [ 
 { transform: 'none' } 
 ], 
 { 
 fill: 'forwards', 
 duration: 3000, 
 easing: 'linear' 
 } 
)

The solution to this problem is to specify at least two animation properties. For example, modify as follows

layer1.animate( 
 [ 
 { transform: 'translateY(-100%)' }, 
 { transform: 'none' } 
 ], 
 { 
 fill: 'forwards', 
 duration: 3000, 
 easing: 'linear' 
 } 
)

Now it should work as expected.

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top