Forum Academy Marketplace Showcase Pricing Features

New Plugin - Animate on Scroll

Hey everyone,

we’ve just released our „Animate on Scroll“ plugin.
This element allows you to trigger animations within your page once the the user scrolls to them and they get into the view of the user. You can choose between 27 different animations, specify the duration/delay of the animation and choose if the animation should be repeated or only showed once. This plugin allows you to create much more dynamic web applications with a better user experience. You also do not have to take care of the users current scrolling position in reference to which element will be animated. This plugin will do all of that for you!

Works best with groups and images.

For a demo please visit: https://3dimage.bubbleapps.io/aos

Plugin page: https://bubble.io/plugin/animate-on-scroll-1584726069797x752959255259119600

Cheers,
Noel

3 Likes

Just curious if on the demo you could show more of the animations?

With 27 available, and the demo only showing what looks like two, it would be easier to sell me on it if I could see more of those 27 available.

2 Likes

+1 on that

1 Like

Sure here are two more demo pages:
Page 1 - https://3dimage.bubbleapps.io/aos2
Page 2 - https://3dimage.bubbleapps.io/aos3

Also here is the full list of available animations:fade,fade-up,fade-down,fade-left,fade-right,fade-up-right,fade-up-left,fade-down-right,fade-down-left,flip-up,flip-down,flip-left,flip-right,slide-up,slide-down,slide-left,slide-right,zoom-in,zoom-in-up,zoom-in-down,zoom-in-left,zoom-in-right,zoom-out,zoom-out-up,zoom-out-down,zoom-out-left,zoom-out-right

Hope that helps!
Noel

1 Like

Hi Leon,

I’ve answered your DM. We’ll look into that and will get back to you.

Cheers,
Noel

(seems to have been something on my end, reinstalled it and it works fine now. Thanks for the prompt help anyways!)

1 Like

Hi, what I couldn’t work out is if this can be used on a repeating group.

For example, let’s say I want to apply a scroll in from the left animation for each cell of a repeating group?

Is this plugin able to handle that? I worry because if each element ID needs to be set manually it won’t work. If it can handle dynamic input, then I think there is a chance it could work.

Thanks

Hi,

you can set element ids in a repeating group dynamically. One example would be to use “Current Cells Index #” as the element id.
Depending on what kind of data is in the repeating group you could also this data as an element Id, for example “Current Cells Title.”

Great to know, I have been using another plugin for animations, but when I came to use it for RGs I found out it did not support dynamic input and so it wouldn’t work.

I did contact the plugin designer to see if he could update it to support dynamic links, if he doesn’t do this I will definitely give this a go!

@Anticode , I see a note that this plugin doesn’t work if items are hidden on page load. Any chance this will change? I am wanting to find an animation solution that works with an RG on items that show conditionally.

@Anticode - installed it but I cannot get it to work at all. Any idea what’s wrong here? This is before even trying it in an RG.

See screenshots :


Set the ID of the element to animate (and make sure set to visible)


Set the animate on scroll plugin to target the correct element ID (and other basic params)

Hello,

hmm I can’t see from the screenshots what the issue might be. Could you please compare your setup to our demo app 3dimage | Bubble Editor to see if there are any differences?

Noel

Hi Noel,

I managed to get it to work, but it’s still not performing as advertised.

The issue seems to be a combination of things. Firstly the location of the plugin doesn’t seem to closely relate to the point at which the trigger happens, particularly when there are other elements that take a bit of time to load that then affect page length (such as an RG). The second issue is that the animation effect is happening too fast, even if I increase the duration from 1000 to say 50,000ms (I’ve experimented with a variety of durations - for example 3000ms duration effect lasts only about 800ms) - there is no discernible difference in the speed of animation? See video: https://youtu.be/90j_k9gQ_wg

This is a big problem as I require careful control of the duration of the effect, how can I achieve this?

Thanks