Make sur you have IDs activated
Settings > Genereal > Expose the option to add an ID attribute to HTML elements
Add an ID to the elements you want to animate
In workflow, add a trigger on page load then an AOS action and set it up. In selectors, enter one or all your IDs separated by comma. You can use any of the predefined options from the AOS doc: GitHub - michalsnik/aos: Animate on scroll library
You can setup multiple AOS action if you want different animations on the elements.
I just made an update so you can animate your repeating group items. To do so, simply add the AOS action in an event that checks if the list loading is done. You add an ID to the repeating group and add it to the AOS action then it will automatically set the animation on all the items by checking to true the ‘Set on repeating items’ setting.
I can’t quite figure out what’s going on here. When I install the plug in, run the exact same set up as you have in your editor, it does nothing.
However, copying your element and workflow into my editor does work. But removing your element, creating a new with the same ID will not work. The animation is not triggered.
Keeping your text element, deleting the AO workflow, creating a new and calling that ID does work.
But copying the WF to another page, and assigning a text element on that page the same ID, just results in that text element not being visible on page load, and popping into existence when reaching the scroll position.
Edit: Looks like the popping into existence is due to a conflict between your plug-in animation and bubble animation. Meaning if “Select a property to define a new transition” is being used on the same element it will break the plug-in animation.
I would suggest adding no transition on the element, as bubble inserts inline css on the element, which would override the library css transition properties. Preferably group the element or elements you want to animate, and don’t add a transition or style on the group. Then you can create any ID you want and reference it in the ‘selector’ input on the plugin, you can’t use the same ID twice.
Also, you can’t animate things above the fold on page load, as bubble loads the plugin afterwards.
It also seems since the new opacity property in bubble overrides the fade animation, it’s just like just like the transition. I went ahead and made a quick update to make sure the new opacity property doesn’t affect animated elements.
If you can share a link i’d be happy to help you more.
Thank you @pedropedro I got those work around going already and I noticed the Fade issue as well. AOS is a great library so absolutely loving having it as an easy plug and play solution. Well done!
I haven’t fully worked out why it doesn’t fire sometimes when I create a new AOS workflow, but copy pasting an existing one seems to work. I’ll investigate that a bit more and let you know if I’m able to reproduce it consistently. Might just be a caching issue on my end.
I did notice that the slide in from right animation expands your page in width before it hits the scroll position to trigger the animation. I haven’t had time to look for a work around for that just yet, perhaps you’ve already found one? It might only happen when you set a maximum width on the parent element containing the animated element.
The issue of the slide in from the right is common with the AOS library, the body needs be set to overflow-x: hidden. I made an update on the plugin to fix that.
thank you @pedropedro unfortunately it’s still doing the same thing even on your latest update. Didn’t have time to troubleshoot it properly, maybe it’s because it’s an element inside a group?
I put overflow-x: hidden on the group containing the animated element instead, and it was overruled by Bubble CSS. Marking it !important took care of it.
@casheets123 just wondering, are you using responsive mode or not? I can do some more testing to see what wrong and what can be improve. Or if you have a link to share i can inspect myself, that always help to make the plugin more bulletproof.
Did anyone ever find a solution?
I can get it to work on normal elements, but simply cannot get it to work on repeating groups even when following the instructions?
Hi. I really appreciate your plugin since I really wanted to make my webpage more attractive with animation.
I just have one problem with the plugin.
I’m now making a mobile webpage with bubble using AOS, but turns out that the animation works only once after I edit the AOS workflow.
Does the AOS have any problems after using it for an animated group?
I want to apply the AOS to a main page that will be shown after the login page. (The main page will be shown in the same page as the login page, but it will be shown as a group after the user logs in)
This works once but after user refreshes the page, the AOS doesn’t work at all.
It will be great to have an answer.
