0.1.37 • Published 1 year ago
beautiful-web-animations v0.1.37
beautiful-web-animations
Yet another collection of pre-made animations made for the web :)
See them all in action here: https://thibaultjanbeyer.github.io/beautiful-web-animations/
Bubble Explosion
Usage:
const BE = BubbleExplosion({
element: document.querySelector('div'), // the element that will get animated
eventListener: 'click', // optional, event on which the animation will start
content: '✅', // optional, this is the valid CSS content, default are bubbles (more info: https://developer.mozilla.org/en-US/docs/Web/CSS/content)
particles: { // optional, particles settings
size: 10, // optional, size of the explosion particles
direction: 'up', // optional, direction for the particles to fly (up|down)
amount: 25, // optional, amount of particles to generate
}
areaSize: { // optional, area size of the explosion
x: 100, // optional, width of the explosion
y: 100, // optional, height of the explosion
},
isAppearing: false, // optional, if true, it reverses the animation (appears instead of disappearing)
})
BE.trigger() // if no event listener is how you can trigger the animation programmatically
BE.destroy() // cleans up the animation by removing the nodes from the DOM
See examples section:
Preload included!
You can also use URLs in your content props. Those will be preloaded before triggering the animation in order to always see the image!
content: "url(https://cataas.com/cat)"
0.1.37
1 year ago
0.1.35
1 year ago
0.1.34
1 year ago
0.1.33
1 year ago
0.1.32
1 year ago
0.1.31
1 year ago
0.1.30
1 year ago
0.1.29
1 year ago
0.1.28
1 year ago
0.1.27
1 year ago
0.1.26
2 years ago
0.1.25
2 years ago
0.1.24
2 years ago
0.1.23
2 years ago
0.1.22
2 years ago
0.1.21
2 years ago
0.1.20
2 years ago
0.1.19
2 years ago
0.1.18
2 years ago
0.1.17
2 years ago
0.1.16
2 years ago
0.1.15
2 years ago
0.1.14
2 years ago
0.1.13
2 years ago
0.1.12
2 years ago
0.1.11
2 years ago
0.1.10
2 years ago
0.1.9
2 years ago
0.1.8
2 years ago
0.1.7
2 years ago
0.1.6
2 years ago
0.1.5
2 years ago
0.1.4
2 years ago
0.1.3
2 years ago
0.1.2
2 years ago
0.1.1
2 years ago
0.1.0
2 years ago
0.0.1
2 years ago