Hello Bubble community!
We are happy to announce that our Powerful plugins for animating any element is now available to install !
Use full potential of https://animejs.com JS library , Animate anything!
DOWNLOAD PLUGIN HERE
SANDBOX DEMO AND DOCUMENTATION
With our plugin you can:
Animate any element (PNG, SVG, etc.)
Create morphing effects
Create “writing by hand effect”
Create rotations of arched text or any other element
Create transition between elements
Create button hover effects
Create sliding effects
And many many more ! Be creative!
*The plugin has one element “Anime JS” which has an action “Anime”.
HOW IT WORKS
- Position the plugin element anywhere on the page.
- Call the “Anime” action in Workflow and pass the required values.
- I recommend to look at our demo page and study the action parameters for various animations (Transition, Scale, Morph, Text)
- Notice that each parameter in action has several variables:
el - The curent animated targeted element
i - The index of the animated targeted element
l - The total number of animated targets
You can use these parameters as you like, the main thing is that each action parameter contains the keyword - anime
AVILABLE PARAMETERS:
Translate (px) - moves the element by the given values
Rotate (deg) - rotates the element by the given values
Scale - changes the size of an element
Skew (deg) - transforms an element by skewing it in 2D space
Perspective (px) - defines the distance between the z-plane
borderRadius - border rounding
duration - Defines the duration in milliseconds of the animation.
delay - Defines the delay in milliseconds of the animation.
endDelay - Adds some extra time in milliseconds at the end of the animation.
Easing - Defines the timing function of the animation.
direction - Defines the direction of the animation.
- ‘normal’ - Animation progress goes from 0 to 100%;
- ‘reverse’ - Animation progress goes from 100% to 0%;
- ‘alternate’ - Animation progress goes from 0% to 100% then goes back to 0%;
Loop - Defines the number of iterations of your animation.
- Number - The number of iterations;
- True - Loop indefinitely;
keyframes - Animation keyframes are defined using an Array, within the keyframes property.
points - SVG Points Array
Please, feel free to ask any questions, use our support links , and leave your reviews so we improve our products!
Insight Custom scrolling FREE plugin | Reusable element scroll IS COMING SOON
Join ADD-X community in twitter https://twitter.com/add_x_plugins
Email: [email protected]