Animations make websites and apps fun and easy to use. They make apps feel alive, like when a button changes colour when clicked with some transiti...
For further actions, you may consider blocking this person and/or reporting abuse
The Web Animations API is great. Particularly with a good reactive library.
Shameless plug: rmemo + the Web Animation API allowed me to replace motion.one. With simpler event timelines. And a smaller bundle payload size (< 600B overhead).
These pages include animations with a YouTube player for < 4.5kb transferred.
brookebrodack.net/brookers
brookebrodack.net/content
How do you handle timeline with WAAPI (Web Animation API) ?
I tried to replace other lib with that, and for single aniamation the API is pretty much like anime.js, but when i wanted to do timeline I've not found a clear explanation ...
Thank you for the question. I forgot to mention. I'm managing the state of the animations in the reactive memos. I extracted a primitive called a
wanimato
...a contraction of "web animation object". Wanimato is exported in ctx-core/web_animation. The types & js implementation are exported along with ctx-core/rmemo.The min + brotli size of
wanimato__new
&memo_
is 733 B according to thesize-limit
library.An animation timeline is achieved using conditionals in the reactive memo. An animation can wait for a previous animation to finish with an
if (!previous_animation$().is_finish) return
guard. I will show two examples:In the Brookers Timeline, the wanimatos are instantiated as variables.
github.com/btakita/ui--browser--br...
h1__flyin_wanimato$
is the first step of the animation sequence.h1__bounce_wanimato$_()
waits untilh1__flyin_wanimato$
is complete before starting. Since this system is reactive, the animations are controlled by the reactive state. Parallel animation tracks can occur.In the Brooke Brodack Content Page, I use a
ctx
to aid in orchestrating the animation state...along with the YouTube Player state.Here is an interesting section that shows uses
be_
functions, which take actx
to orchestrate animations in concert with the YT_Player.github.com/btakita/ui--browser--br...
Here are the first two wanimatos from the block of code.
Amazing!
Add motion.one also
This is awesome! Thanks for mentioning!
very useful information Thank you very much for this article
Glad you liked it!
Thank you
My pleasure!
This is useful thanks, I also wrote a post on websites one can build using Next.js, you can check it here
Welcome!
Do checkout web-dev-resource.capscode.in/
Here we have listed 1000+ web tools which is very much beneficial for developers.
And do share your feedback.
This is great! Thanks for mentioning this.
Great one Arjun as always! For those who're interested in more, here's some more useful javascript animations: webcurate.co/c/javascript-animation
Thanks brother!
this was super exited...
Nice!