⚡️[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: addx.plugins@gmail.com

6 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

A great example on and insight would be these effect:

1 Like

Ok! we will add it … Sorry for delay :slight_smile:

We’ve just developed the animation you requested! It is 100% like in the link you ve mentioned in the forum

Here is the links:

- DEMO: https://addxnocode.com/anim_test

- EDITOR: ADD-X NoCode | Bubble Editor

Thanks for using our plugin!
Please , leave a :star::star::star::star::star: five stars review if you like it !

It will help us to improve our products !

Best Regards, ADD-X NOCODE.

1 Like

Amazing! This plugin is great.

1 Like

Thanks a lot!!! We work to make it even more powerful !

Hi all! :slight_smile: :fist_right: :fist_left:First of all, we want to say that we are glad to see new users of our plugin, thanks to you we are making the product better and regularly supporting it.

Today we have finally released the long-awaited short tutorial on the first animation template from our page.

This example is special and you can create it on your website in 3 minutes! No code!

Here is a link to a video on how to do it!

Just sent over a message, love to see the tutorials. I’m still learning on how to use this but definitely getting better day by day.

1 Like

Wow, that looks a bit challenging but we’ll take a look how to make it !

1 Like

Hey Bubble Community,

We’ve released another Animations tutorial today! How to create Rotating Text Effect in bubble.io with no-code?

The plugin in video is paid, but for the fair price you’ll be able to build thousands of animations without single line of code and use templates created by team of professionals! Pay once and save hours of work time!

Hopefully it helps a few people who searched this popular effect!

Find more animation tutorials in this channel.