Convert CSS animation-timeline to JavaScript cross-browser
I have written a CSS animation/parallax effect that works with animation-timeline
and I like the result.
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) […]
activating a keyframe animation based on a click event that adds & removes a css class
I’m trying to use keyframe animations to move a block up and down based on adding or removing a class using jquery click. However, this seems to “jiggle” the orange div on load, and then does absolutely nothing after that.
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.