Forum Academy Marketplace Showcase Pricing Features

⚡️[NEW PLUGIN] Powerful Animations Plugin | First Anime.js plugin | Animate any object | 100% custom animations | Hover, Morph, Transitions, Writing effect (see Demo)

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! :mage:

:link:DOWNLOAD PLUGIN HERE
:link:SANDBOX DEMO AND DOCUMENTATION

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

And many many more ! Be creative!

*The plugin has one element “Anime JS” which has an action “Anime”.

:joystick: HOW IT WORKS

  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)
  4. Notice that each parameter in action has several variables:
    :point_right:el - The curent animated targeted element
    :point_right: i - The index of the animated targeted element
    :point_right:l - The total number of animated targets

:zap:You can use these parameters as you like, the main thing is that each action parameter contains the keyword - anime

:gear: AVILABLE PARAMETERS:

:white_check_mark:Translate (px) - moves the element by the given values
:white_check_mark:Rotate (deg) - rotates the element by the given values
:white_check_mark:Scale - changes the size of an element
:white_check_mark:Skew (deg) - transforms an element by skewing it in 2D space
:white_check_mark:Perspective (px) - defines the distance between the z-plane
:white_check_mark:borderRadius - border rounding
:white_check_mark:duration - Defines the duration in milliseconds of the animation.
:white_check_mark:delay - Defines the delay in milliseconds of the animation.
:white_check_mark:endDelay - Adds some extra time in milliseconds at the end of the animation.
:white_check_mark:Easing - Defines the timing function of the animation.
:white_check_mark: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%;

:white_check_mark:Loop - Defines the number of iterations of your animation.
- Number - The number of iterations;
- True - Loop indefinitely;
:white_check_mark: keyframes - Animation keyframes are defined using an Array, within the keyframes property.
:white_check_mark:points - SVG Points Array

Please, feel free to ask any questions, use our support links , and leave your reviews so we improve our products!

:shushing_face: 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]

4 Likes

This is great, loving this. Currently testing this out on our landing page.

1 Like

Hello! Thanks a lot! Can you show what you’ve already made? :upside_down_face:

Feel free to ask any questions if you need support :fist_right: :fist_left:

By the way, we are working on tutorials about how to use plugin for 100% and how-to create animated blocks that increase UI and UX power.

1 Like

Awesome, tutorials would be great. There’s definitely a learning curve, so that would be helpful.

1 Like

Working on it! What animations examples you would like to create in your website? We are about filming practical tutorials about how to build specific animated blocks / elements / etc.

So if you have an example or specific task, we’ll be glad to review and help you with that! :slightly_smiling_face:

This our first video from How-to-make NoCode Animations series: “General overview of Animations | Anime.js Plugin”

More tutorials coming soon!

1 Like