Anime JS

This plugin brings the power of Anime.js to Bubble.io, enabling users to add stunning pre-made animations to their web pages using custom elements. The plugin provides four distinct elements, each offering unique and eye-catching animations that can

Arqam Saleem

Last Update 2 jaar geleden

Editor Link : https://bubble.io/page?id=chakor-plugin-demo-3&tab=Design&name=animejs&type=page

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:

    1. TwinLines
    2. FloatIn
    3. FadeIn
    4. ReadySetGo
    5. SlideOpen
    6. BubbleUp
    7. Skate
    8. Pop
    9. Bounce
    10. Window
    11. Type
    12. ElegantSlide
    13. WindFlow
    14. Underline.Reveal
    15. 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

4. Pulse Sphere

This is a custom pre-built animated from the anime js homepage component with color and size customization available. just drop in the element and you are good to go

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.
Instructions

  1. Adding Elements:

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

  2. Customization:

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

  3. 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.

  4. Previewing Animations:

    • Use the Bubble preview mode to see your animations in action.
FAQsQ1: Can I use multiple animations on a single page?

Yes, you can add multiple elements and configure each one with different animations.

Q2: How do I adjust animation speed?

Each element comes with a speed control in the property editor, allowing you to set the duration in milliseconds.

Q3: Can I create custom animations beyond the provided options?

The Morpher element supports custom SVG animations by assigning unique IDs to your SVGs.

Best Practices
  • Use contrasting colors for better visibility and impact.
  • Combine animations thoughtfully to avoid overwhelming users.
  • Test animations in various browsers to ensure compatibility.

Was this article helpful?

0 out of 0 liked this article