Skip to content

Instantly share code, notes, and snippets.

@jakearchibald
Last active July 26, 2023 20:45
Star You must be signed in to star a gist
Save jakearchibald/0b50c4918eaf9a67bfcfa55e7e61cd56 to your computer and use it in GitHub Desktop.
/**
* @param {HTMLElement} element
* @param {Keyframe[] | PropertyIndexedKeyframes} to
* @param {KeyframeAnimationOptions} options
*/
export function animateTo(element, to, options) {
const anim = element.animate(
to,
{ ...options, fill: 'both' },
);
anim.addEventListener('finish', () => {
anim.commitStyles();
anim.cancel();
});
return anim;
}
/**
* @param {HTMLElement} element
* @param {PropertyIndexedKeyframes} from
* @param {KeyframeAnimationOptions} options
*/
export function animateFrom(element, from, options) {
return element.animate(
{ ...from, offset: 0 },
{ ...options, fill: 'backwards' },
);
}
@WORMSS
Copy link

WORMSS commented Nov 11, 2020

I would recommend doing { fill: 'both', ...options }, that way if someone wants to override your 'both' to only be 'forward' for a single instance or a new argument is added in the future disco maybe, it should be easy to override on a single call

@seocamo
Copy link

seocamo commented Nov 12, 2020

I would recommend doing { fill: 'both', ...options }, that way if someone wants to override your 'both' to only be 'forward' for a single instance or a new argument is added in the future disco maybe, it should be easy to override on a single call

this is the point, he did this in this way because the fix don't work without the fill as both and then there is no reason to use it.

@WORMSS
Copy link

WORMSS commented Nov 12, 2020

I would recommend doing { fill: 'both', ...options }, that way if someone wants to override your 'both' to only be 'forward' for a single instance or a new argument is added in the future disco maybe, it should be easy to override on a single call

this is the point, he did this in this way because the fix don't work without the fill as both and then there is no reason to use it.

It works with forward. What if I want forward and not both. What if I pass in delay, but I don't, for whatever reason, want it to fill both?
What if future feature of 'disco' works just like 'both', but with extra cool feature.
If someone passes in nothing, 'both' would still be given. If someone passes in 'forward', the feature would still work and act exactly the way the person wants.
If someone passes in 'backwards', well, that is their own damn fault for breaking it.

@stefanfrede
Copy link

Hmm, after having a look at Can I use... it seems Chrome and Edge are not supporting commitStyles(): https://caniuse.com/?search=commitStyles

@MrVoicer
Copy link

How to use this code on a website to add transition animations ?

@jakearchibald
Copy link
Author

@stefanfrede caniuse is out of date. This code works in all modern browsers.

@WORMSS
Copy link

WORMSS commented Nov 17, 2020

@stefanfrede caniuse is out of date. This code works in all modern browsers.

@jakearchibald
Maybe a PR on https://github.com/mdn/browser-compat-data if you happen to know the versions of the browsers it was added?

@JodiWarren
Copy link

@jakearchibald Teeny tiny doc/property mismatch:

* @param {Keyframe[] | PropertyIndexedKeyframes} to
should be
* @param {Keyframe[] | PropertyIndexedKeyframes} keyframes

@jakearchibald
Copy link
Author

@JodiWarren updated, cheers!

@aryanpingle
Copy link

anim.commitStyles() throws an Error while animating pseudo elements:

Uncaught DOMException: Failed to execute 'commitStyles' on 'Animation': Animation not associated with a styled taemptyement

Possible solution: call commitStyles() only if the user is not animating a pseudo-element with:
if(!( 'pseudoElement' in options && options['pseudoElement'] )) anim.commitStyles();

This prevents an Error from throwing, but might give users a false sense of security that the pseudo-element will retain the styles after the animation finishes. May be a side note in the JSDoc?

@jakearchibald
Copy link
Author

Yeah, pseudo-elements currently cannot have inline styles. I hope that changes some day, and it's been discussed. But got now, it's better to use animateFrom on pseudos.

@aryanpingle
Copy link

I see, thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment