🕹️DEMO PAGE & DOCUMENTATION: https://addxnocode.com/anime_js

🎓How-To-Use Video: https://www.youtube.com/watch?v=Oee5K1yRzMY&t=120s

💫Unlimited animations / morphing / transitions plugin in your bubble app!

✅Improve interface / web design with stunning motion effects powered by anime.js library.

With our plugin you can create:
- Animate any element (PNG, SVG, etc.)
- Create morphing effects
- Animate "writing by hand"
- Animate endless rotations of arched text or any other element
- Animate transition between elements
- Animate button hover effects
- Create sliding effects
- Create morphing.

💯Make your interface engaging and attractive, comparing to your competitors.

And many more! Be creative with available parameters!

Check documentation on https://animejs.com/ library  website.

How this plugin helps?


➡️ When users interact with elements on a website, animations and hover effects can provide immediate visual feedback. This feedback reassures users that their actions are being recognized, making the experience more intuitive and responsive. For instance, a button changing color or growing slightly when hovered over signifies that it's clickable, encouraging interaction.

➡️Animated menus, navigation bars, and tooltips can make navigating a website easier and more enjoyable.

➡️Animations can be used to emphasize the visual hierarchy of a page. For instance, when a user scrolls, animated elements can draw attention to important content or guide the user's focus. Morphing can smoothly transition between different levels of detail, making the experience less jarring and more comfortable.



⚡️With this powerful plugin you can create different animations for your website / app and make it more unique. Anime JS is limitless.
Go to the official site http://animejs.com and see all the possibilities of this library!

The plugin has one element "Anime JS" which has an action "Anime".

1. Position the plugin element anywhere on the page.
2. Call the "Anime" action in Workflow and pass the required values.
3. I recommend to look at our demo page and study the action parameters for various animations (Transition, Scale, Morph, Text) Tutorial: https://rb.gy/afw9k 🎓
4. 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
Example: anime random(i, i+1) * 250

5. Let's study all the 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
Example:  [{
"value": [
"64 68.64 8.574 100 63.446 67.68 64 4 64.554 67.68 119.426 100"
]
}]

strokeDashoffset - For Text writing animation.
Example: [anime.setDashoffset, 0]

Feel free to ask us any questions!

🤝Ask us for helping setup your animation! 🤝