Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add DOM Style version of animate.css #1834

Open
wants to merge 3 commits into
base: main
Choose a base branch
from

Conversation

zakarialaoui10
Copy link

@zakarialaoui10 zakarialaoui10 commented Sep 15, 2024

Idea :

Since March 2020, the Element class, which serves as the base class for all HTMLElement, SVGElement, and MathMLElement instances, has incorporated a feature known as animate.

The animate method in the Element class provides a way to create animations directly on DOM elements using the Web Animations API. This method allows you to animate CSS properties or other attributes of an element over a specified duration.

As I am developing a JavaScript library named ziko.js, which utilizes DOM nodes to create and manipulate user interfaces, I have also adopted this .animate() feature. While working on built-in animations for the library, I discovered your library and decided to aimplemnt its JavaScript.

So all libraries that use this hyperscript approach can use it as well as the dom element .

Usage :

  • With Dom node :
 let element = document.querySelector(/* selector */);
 let {keyframes, config} = bounce(1000, 2, "ease");
 element.animate(keyframes, config)
  • With zikojs :
 import {text} from "ziko"
 import {bounce} from "animate.css/js"
 let txt= text("Hello from zikojs").style({
    color : "darkblue"
 });
 let {keyframes, config} = bounce(1000, 2, "ease")
 txt.animate(keyframes, config)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant