Relative Content

Tag Archive for javascriptcsscss-animations

Javascript animation queue

export class AnimateElement { constructor(el) { this.el = el; this.animationQueue = []; this.handleAnimationEnd = this.handleAnimationEnd.bind(this); } addAnimation(fromx, fromy, tox, toy, delay, time, func = ‘linear’, direction = ‘forwards’, handler = null) { this.animationQueue.push({ fromx, fromy, tox, toy, delay, time, func, direction, handler }); console.log(this.animationQueue); } move() { console.log(‘move called.’, this.animationQueue.length, this.animationQueue); if (this.animationQueue.length > 0) […]

element.animate() using Keyframes seems to ignore easing function

I’m trying to make a CSS animation that bounces back and forth, with a pause at each end. Using the Javascript method element.animate() seems to do the trick, except that using keyframes breaks the easing function, which doesn’t happen when using only CSS.

CSS ‘hide’ animation is not displaying for toast

I’m having some trouble getting my ‘hide’ animation to work for my toasts. The ‘show’ animation works as expected when the toast appears, but the ‘hide’ animation fails to display and the toast simply disappears. I can see that the classes are being added correctly when logging things out. I have also tried using an ‘animationEnd’ event listener but have not been able to get it to work.