[NEW PLUGIN ] ⚡️ Ultimate Animations Plugin — Animate Any Bubble Element! 100% Custom Scroll Based, Timed Sequences & Mouse Move Animations

Showcase
1

Hey Everyone!

I wanted to let everyone know that the Ultimate Animations Plugin is now live!

:link: Live Demo + Documentation
:link: Demo Editor
:link: Plugin Page

This plugin is the first of its kind. It provides a framework for building custom animations rather than having you choose from a few preset options. The limit is truly your imagination. For those who have used Webflow, this plugin brings all of Webflow interactions to the bubble editor!

It has plenty of surprisingly functional use cases as well, for example making a repeating group transparent (Opacity 0%) instead of hiding it on page load so it still populates for when you want to show it!

Please let me know what you think!
————————————————————————

Heres a quick overview:
ELEMENTS:

  1. :stopwatch: Timeline (Compose & Control Timed Animation Sequences)
  2. :anchor: Scroll Anchor (Compose and Control Scroll Based And Scroll triggered animations)
  3. :mouse: Mouse Move (Compose Animations that Respond to Mouse Movement)
  4. :round_pushpin: Scroll % (Returns the percentage of the page that has been scrolled)

NON ELEMENT WORKFLOW ACTIONS:
These are workflow actions not associated with an element. There are plenty of workflow actions that are element specific which you can read about in the documentation.

:zap: Quick Animate
:zap: Custom Scroll To Element

——————————————————————————

PROPERTIES YOU CAN ANIMATE:

:zap: Move X
:zap: Move Y
:zap: Scale X
:zap: Scale Y
:zap: Rotation
:zap: Opacity
:zap: Skew X
:zap: Skew Y
:zap: Background Color
:zap: Text Color
:zap: Width
:zap: Height

FEATURES:

:bulb: Intuitive & Well Documented

:art: Create 100% Custom Animations with No Limitations

:scissors: Move+Width+Height Units (px,%,VH,VW,EM,REM)

:triangular_ruler: Transform Origin Control

:chart_with_upwards_trend: Full Easing Library

:tada: Single & Multi Property Animations

:stopwatch: Complete Timing Control

:repeat_one: Looping + Direction Freedom

:vertical_traffic_light: Animation Override

:potable_water: Total Overflow Control

:racing_car: Extremely High Performance CSS Transforms

:calling: Mobile Ready!

17 Likes
2

I installed right after you launched! Having a blast so far. I’ll let you know if any questions come up!

1 Like
3

Can you build flip cards with this?

4

No 3D animations yet. I will work to add these in the next update.

2 Likes
5

Awesome! You can always come back to this thread with questions.

6

Im trying to animate a Sidebar menu like you have in the demo. I tried creating two timelines, 1 forward and 1 backward. However when I try to play one of them before the other is finished, it skips to the end and then plays… I hope that makes sense :sweat_smile:.

How do you smoothly animate that sidebar menu in the demo?

7

Please PM me a Link to your editor and I’ll Take a look!

8

@sidney3 's question may clear up some others. When playing a timeline, you can use ‘Play To’ to play that timeline to a the specified time. The timeline will play from the point it is currently at to the point you specify in the workflow. If the specified time is less than the current time, the timeline will play in reverse which is how you can achieve the desired effect like the sidebar menu in the demo.

1 Like
9

Awesome for creating custom page loaders. Well done.

1 Like
10

Thank you! I was thinking about creating a library of example page loaders using the plugin. Any interest from the community?

3 Likes
11

This is cool! I’ll be back when I need it.

12

Awesome! Thank you! Let me know if you have any questions.

13

I am trying to make a page loader using a floating group as you have done in the demo but I can’t seem to center the loading animation as you have. Any ideas?

14

Hey!

If you look in the ‘Preloader’ Timeline I created you will see that I set the initial height of the preloader wrapper to 100, then I select ‘VH’ and my units. The Preloader is an align to parent element with the ‘Animation Container’ centered.

15

Also Make sure that your floating group is floating relative to the top AND bottom of the page and that it scales 100% of the pages height.

16

3D Animation functionality in development and coming soon! @christo1

1 Like
17

@23cubed awesome plugin! just what i needed. I was trying to implement Greensock GSAP into bubble.io but this plugin does a lot of the thinks GSAP offers.

Question: i tried to use the anchor in a repeating group but then all the cells in the repeating group are triggerd when the first anchor hits the viewport, because they all have the same ID. is it possible to make the id dynamic so i can link them to a cell index number or another unique id. I don’t know if this will work, but that would be a great update for the plugin!

Also the “scrollsmoother” plugin from Greensock would be a nice feature.

18

@23cubed Great plugin and I have used extensively. I would like to add to another app I am creating but it will need to available in China, I am wondering if there is anyway to get a version that use bubble or another host for the velocity.js lib? Github is blocked in China so it makes your plugin unusable there.

19

Let me see if I can host it locally within the plugin!

1 Like
20

I will make the ID Dynamic!

1 Like