Anime JS logo

Anime JS

Published December 2024
   •    Updated June 2025

Plugin details

Plugin Elements
1. Anime.js Logo Animation
This element displays an animated Anime.js logo.

Customization Options:
Colors: Customizable primary and secondary colors for the logo.
Animation Speed: Adjustable animation duration.
Text Animations

2. Moving Letters
A text element with 16 built-in animations to bring your text to life.

Animations Available:

TwinLines
FloatIn
FadeIn
ReadySetGo
SlideOpen
BubbleUp
Skate
Pop
Bounce
Window
Type
ElegantSlide
WindFlow
Underline.Reveal
SmoothDrop
Customization Options:

Text Content: Enter your custom text.
Animation Style: Select one of the 16 animations.
Animation Speed: Adjust animation speed (in ms).
Text Styling: Font size, color, weight, etc.
Organic Shapes

3. Organic Shapes with Hover Animations
Adds organic shapes to your design with 9 hover-triggered animations.

Customization Options:

Shape Color: Customizable fill and stroke colors.
Hover Animation Style: Choose from the 9 pre-made effects.
Size: Adjust the dimensions of the shape.
SVG Morpher

5. Morpher
The Morpher enables custom animations for SVGs within HTML elements using IDs in the format morph-{style}-loop.

How It Works:
Add your custom SVGs within a Bubble HTML element.
Assign an ID following the pattern: morph-{animationStyle}-loop (e.g., morph-expand-loop).
The plugin automatically detects and animates the SVG.
Customization Options:
Animation Styles: Add your preferred morphing styles.
Loop Settings: Enable or disable looping animations.

$50

One time  •  Or  $8/mo

stars   •   0 ratings
5 installs  
This plugin does not collect or track your personal data.

Platform

Web

Contributor details

Chakor logo
Chakor
Joined 2021   •   371 Plugins
View contributor profile

Instructions

Instructions Adding Elements:

Drag and drop the desired animation element from the plugin panel onto your Bubble page.
Customization:

Configure the animation settings in the property editor. Adjust text, colors, animation styles, and speeds as needed.
Using the Morpher:

Insert an HTML element in your Bubble app.
Add your custom SVG code inside the HTML element.
Assign an ID following the format: morph-{style}-loop.
The animation will be applied automatically based on the ID's style.
Previewing Animations:

Use the Bubble preview mode to see your animations in action.

Types

This plugin can be found under the following types:

Categories

This plugin can be found under the following categories:
Image   •   Media   •   Visual Elements

Resources

Support contact
Documentation
Tutorial

Rating and reviews

No reviews yet

This plugin has not received any reviews.
Bubble