Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

deactivate animations for a group of devices #1639

Closed
nicolasblume opened this issue Apr 25, 2017 · 24 comments

Comments

Projects
None yet
@nicolasblume
Copy link

commented Apr 25, 2017

For my problem (#1523) the easiest solution would be to to turn off animations only mobile devices.
A fade in effect makes less sense on a phone, where you have to scroll more, which already looks a bit like a fade in effect.

So it would be awesome to have a full responsive control over anymations. Then you can set a different animation (or no animation) for every screensize.

I know this is related to #558, but I through this I want to emphasize the importance that this issue has for our site.

@nicolasblume nicolasblume changed the title deactivate animations for a type of device deactivate animations for a group of devices Apr 25, 2017

@nicolasblume

This comment has been minimized.

Copy link
Author

commented Apr 26, 2017

I updated my request: I forgot to say, that I need to be able to turn off animations on phones individually for any element and not (only) globally.

@carasmo

This comment has been minimized.

Copy link
Contributor

commented Apr 26, 2017

That could be done with something that removes the data-animation attribute with jQuery at a breakpoint. Since this would only remove the animation for viewport widths and not actual device types, I wouldn't consider it.

To actually remove animation per section on a device itself, the end-developer/user could use the mobble detect plugin then add a custom class to a section and use jQuery to remove the attribute on the device type itself. In the settings of mobble, you can turn on classes.

    // https://github.com/scottsweb/mobble/blob/master/mobble.php#L300
    // https://github.com/scottsweb/mobble/blob/master/mobble.php#L443

    if ( $( 'body' ).is( '.mobile' ) ) {
        $( '.your-section-class' ).removeAttr( 'data-animation' );
    }
		
@nicolasblume

This comment has been minimized.

Copy link
Author

commented Apr 26, 2017

@carasmo that sounds interesting, thanks! The first option (beakpoint for viewport widths) would be fine for us.

Can I turn off the animations only for specific sections (or elements like pictures) or will this turn off animations globally for every narrower screen width?

Unfortunately I have very little coding skills but maybe I could get some help with jQuery ffrom a friend.

But I still hope that this will be added in elementor itself at a later date 😄

@parfilov

This comment has been minimized.

Copy link

commented Jul 3, 2018

+1

@markhagemann

This comment has been minimized.

Copy link

commented Aug 9, 2018

+1

@kkeennaa

This comment has been minimized.

Copy link

commented Sep 5, 2018

Why hasn't this been implemented yet?

@dotpdesign

This comment has been minimized.

Copy link

commented Sep 10, 2018

+1 for why this isn't implemented yet. This is important to be able to disable on mobile.

@kapoow

This comment has been minimized.

Copy link

commented Sep 13, 2018

+1

1 similar comment
@MPHood

This comment has been minimized.

Copy link

commented Dec 2, 2018

+1

@bulutemre

This comment has been minimized.

Copy link

commented Jan 19, 2019

+1 I think this is an important feature and we are already 2019 but no improvements?

@arielk arielk added this to the 2.5.0 milestone Jan 30, 2019

@dribgib

This comment has been minimized.

Copy link

commented Feb 2, 2019

+1 hopefully this would include disabling particles

@sunnyt7

This comment has been minimized.

Copy link

commented Feb 7, 2019

+1 from me. I find animations can make the scrolling more jittery on mobile. Definitely need an easier way to disable them.

@sunnyt7

This comment has been minimized.

Copy link

commented Feb 8, 2019

Also, I've used https://gist.github.com/agragregra/25f26a76cbfb9b5bb430 to disable the animations, but it doesn't disable any animation delays, which are set within the data-settings attribute. Any ideas?

@dribgib

This comment has been minimized.

Copy link

commented Feb 8, 2019

It'd be nice if there was a solution beyond CSS tricks - I'd like the assets to not even load.

@holle75

This comment has been minimized.

Copy link

commented Feb 24, 2019

+1

@dribgib If i understand you right - not showing certain elements/columns/sections on mobile at all - THIS you can define under "advanced -> responsive" when selected your element

@sunnyt7

Also, I've used https://gist.github.com/agragregra/25f26a76cbfb9b5bb430 to disable the animations, but it doesn't disable any animation delays, which are set within the data-settings attribute. Any ideas?

Yup. I agree. Wheres the benefit in using the css-hack if instead things scroll/fade in they just pop-up where before was a "white" area?

And please, Elementor-Creators, this feature actually isn´t a feature, it´s a necessity. On mobiles, besides having the option to not show an element at all, ones theme created with elementor, when using fade/scroll animations, looks just silly/unprofessional. And - big malus- is irritating like hell.

@shilo-ey

This comment has been minimized.

Copy link
Collaborator

commented Mar 4, 2019

This feature has been added in Elementor v2.5.0

Feel free to update!

@shilo-ey shilo-ey closed this Mar 4, 2019

@parfilov

This comment has been minimized.

Copy link

commented Mar 4, 2019

@shilo-ey how to disable it? I'm using this options but the animation on mobile still shows. Looking on android smartphone.
animations

@shilo-ey

This comment has been minimized.

Copy link
Collaborator

commented Mar 5, 2019

@parfilov

Thanks for reporting.

Can you please open a new thread with this issue?

Thanks!

@parfilov

This comment has been minimized.

Copy link

commented Mar 5, 2019

@shilo-ey yes, I'll do it.

@ngothai2712

This comment has been minimized.

Copy link

commented Mar 7, 2019

I also have such a problem!

@parfilov parfilov referenced this issue Mar 7, 2019

Closed

Animation cannot be disabled on mobile devices #7355

5 of 5 tasks complete
@parfilov

This comment has been minimized.

Copy link

commented Mar 7, 2019

@ngothai2712 Place your "+" here #7355

@shilo-ey

This comment has been minimized.

Copy link
Collaborator

commented Mar 7, 2019

@parfilov

Thanks!

@foxje

This comment has been minimized.

Copy link

commented Apr 13, 2019

+1

@david-sarra

This comment has been minimized.

Copy link

commented Apr 26, 2019

I am also struggling with this because I want to turn off hover animations on tablet and mobile. It looks like that I should edit the "includes/controls/hover-animation.php" file but this would affect all the elements and just want to focus on specific ones.

source

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.