Animation on Device

Bootstrap Studio Help
1

Hi, how can i enable the animation like "o.n Scroll" on devices like iPad, iPhone etc.?

2

Bump for this to be answered please as it's not working for me either

3

Easiest is not use that new component, but do AOS manually.

add css and js from https://cdnjs.com/libraries/aos in the attributes pane for a div click add , data-aos with value slide-left (you find attributes and values here: https://github.com/michalsnik/aos )

and in your user.js

/* this part to init AOS function */
$(function() {  /* this is the jQuery equivalent of documents.ready */
    AOS.init({
      disable: 'mobile'
    });
});

leave out the disable: 'mobile' if you really want to use animations on mobiles too. Other examples for 'disable' can be found here: https://github.com/michalsnik/aos

BTW, doing it manually there are many more actions you can set, like animation delay, easing etc. see: https://michalsnik.github.io/aos/

<div data-aos="fade-zoom-in"
     data-aos-easing="ease-in-back"
     data-aos-delay="300"
     data-aos-offset="0">
</div>
4

That's a good workaround Marrco but like the original poster I am intrigued to understand why this doesn't work on mobile since the release from BSS devs

5

I was wondering why it didn't work. I just suspected it makes it load faster on mobile so it's been made standard. Now I'm curious to know whether it's an actual bug or my hunch is right

6

no idea, but at least we have a workaround. BTW, i don't think it's a good design practice to have animations on mobile. So for me that's a good standard, even if i prefer to define all AOS adding the attributes to the div. Much more power and flexibility. And i really don't know if it's up to BSS to have many jquery libs included. For AOS i see no real need. You can add that effect really simply. Same for smoothscrool (https://cdnjs.com/libraries/smooth-scroll), cookie consent (https://cdnjs.com/libraries/cookieconsent2), parallax background and many others.

So it's quite a bit delusional for me to see new bss versions just include support for a few jquery libraries. What i think it's needed are a few detailed howto so to understand how to add these simply jquery libs to enrich our websites. Then it would be great to be able to create additional components that use the right pane to set options. So we could easily create a google analytics component where you just set the UA-XXXXXXXXX id and maybe a few more options. I think jquery libs supports belong to user created components.

7

Sorry for the delay. I have missed this post earlier.

Animations are disabled on mobile devices, as it is generally considered a poor user experience there. Scroll animations have a detrimental effect to the fluidity of the page, especially on older phones, which is why we choose to not run them on mobile devices. The same goes for the Parallax block.

The animation panel in Bootstrap Studio is a convenience for busy developers. If you need access to the full breadth of options of AOS, you can use the library directly.

8

Fair comment Martin, thanks for explaining

9

Hi Martin:

Just a suggestion... Given that most actual mobile devices (and old devices too) are powerful enough to run even browser games... Can at least the use of animations be optional?

10

It says right in the BSS Tutorial Page on Animations...

Note: Scroll animations are disabled on mobile devices, as they can degrade scroll performance and are considered a poor experience there.

11

Nevertheless... most actual mobile devices (and old devices too) are powerful enough to even run browser games, I don't see why animations are considered a poor experience when scrolling. I have an iPhone SE and I don't see any lag when scrolling and using bootstrap animations.

12

@Eduardo

I agree. I have plenty of animation on this site www.bustosmartialarts.com and it works fine on my four year old Droid Turbo.