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 · 34 comments
Closed

deactivate animations for a group of devices #1639

nicolasblume opened this issue Apr 25, 2017 · 34 comments

Comments

@nicolasblume
Copy link

@nicolasblume nicolasblume 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
Copy link
Author

@nicolasblume nicolasblume 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
Copy link
Contributor

@carasmo carasmo 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
Copy link
Author

@nicolasblume nicolasblume 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
Copy link

@parfilov parfilov commented Jul 3, 2018

+1

@markhagemann
Copy link

@markhagemann markhagemann commented Aug 9, 2018

+1

@kkeennaa
Copy link

@kkeennaa kkeennaa commented Sep 5, 2018

Why hasn't this been implemented yet?

@dotpdesign
Copy link

@dotpdesign dotpdesign commented Sep 10, 2018

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

@kapoow
Copy link

@kapoow kapoow commented Sep 13, 2018

+1

1 similar comment
@MPHood
Copy link

@MPHood MPHood commented Dec 2, 2018

+1

@bulutemre
Copy link

@bulutemre bulutemre 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
Copy link

@dribgib dribgib commented Feb 2, 2019

+1 hopefully this would include disabling particles

@sunnyt7
Copy link

@sunnyt7 sunnyt7 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
Copy link

@sunnyt7 sunnyt7 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
Copy link

@dribgib dribgib 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
Copy link

@holle75 holle75 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
Copy link
Collaborator

@shilo-ey shilo-ey 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
Copy link

@parfilov parfilov 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
Copy link
Collaborator

@shilo-ey shilo-ey commented Mar 5, 2019

@parfilov

Thanks for reporting.

Can you please open a new thread with this issue?

Thanks!

@parfilov
Copy link

@parfilov parfilov commented Mar 5, 2019

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

@ngothai2712
Copy link

@ngothai2712 ngothai2712 commented Mar 7, 2019

I also have such a problem!

@parfilov
Copy link

@parfilov parfilov commented Mar 7, 2019

@ngothai2712 Place your "+" here #7355

@shilo-ey
Copy link
Collaborator

@shilo-ey shilo-ey commented Mar 7, 2019

@parfilov

Thanks!

@foxje
Copy link

@foxje foxje commented Apr 13, 2019

+1

@david-sarra
Copy link

@david-sarra david-sarra 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

@yaniv691
Copy link

@yaniv691 yaniv691 commented Jul 8, 2019

When will globally disabling animation on mobiles going to be implemented.
The entrance animation are messing up the UX on mobile.

@IrfanNajeebKhan
Copy link

@IrfanNajeebKhan IrfanNajeebKhan commented Jul 19, 2019

how can i set my website on mobile horizontal screen plz guide me...!?
i'm developing my on wordpress using elementor page builder

@slamdive
Copy link

@slamdive slamdive commented Oct 6, 2019

When using an animation delay, switching the Entrance Animation to 'none' on mobile does not stop the animation delay.

The animation stops but the delay remains.
Is there any way to also turn off the delay?

@sunnyt7
Copy link

@sunnyt7 sunnyt7 commented Nov 28, 2019

When using an animation delay, switching the Entrance Animation to 'none' on mobile does not stop the animation delay.

The animation stops but the delay remains.
Is there any way to also turn off the delay?

I'm having the same issue. There shouldn't be a delay if we set the entrance animation to none on mobile.

@PortalPacific
Copy link

@PortalPacific PortalPacific commented Jan 15, 2020

You can easily disable it with some simple CSS... Just add a media query and override the inline style attribute for "transform"

`
/disable scroll animation on mobile/

@media only screen and (max-width: 767px) and (min-width: 0px) {
.elementor-motion-effects-element[style] {
transform: initial!important;
}
}
`

@dribgib
Copy link

@dribgib dribgib commented Jan 15, 2020

@PortalPacific
Copy link

@PortalPacific PortalPacific commented Jan 15, 2020

That doesn't prevent the assets from loading, which still use resources

On Wed, Jan 15, 2020 at 7:32 AM PortalPacific @.***> wrote: You can easily disable it with some simple CSS... @media only screen and (max-width: 767px) and (min-width: 0px) { /disable scroll animation on mobile/ .elementor-motion-effects-element[style] { transform: initial!important; } }

Stop Js from loading by using more JS? You do realize how dumb that sounds?

My solution is the only viable one without PHP. The question was in regards to stopping the animation. Not removing the resources on load.

@dribgib
Copy link

@dribgib dribgib commented Jan 15, 2020

@labazowie
Copy link

@labazowie labazowie commented Oct 21, 2020

Hi! I managed to solve this problem using js and css.

CSS

@media only screen and (max-width : 768px) {
	.animated {
		/*CSS transitions*/
		-o-transition-property: none !important;
		-moz-transition-property: none !important;
		-ms-transition-property: none !important;
		-webkit-transition-property: none !important;
		transition-property: none !important;
		/*CSS transforms*/
		-o-transform: none !important;
		-moz-transform: none !important;
		-ms-transform: none !important;
		-webkit-transform: none !important;
		transform: none !important;
		/*CSS animations*/
		-webkit-animation: none !important;
		-moz-animation: none !important;
		-o-animation: none !important;
		-ms-animation: none !important;
		animation: none !important;
    -webkit-animation-duration: 0s!important;
    animation-duration:0s!important;
		    -webkit-animation-delay: 0s!important;
    animation-delay:0s!important;
	}
	.animated.animated-slow {
    -webkit-animation-duration: 0s!important;
    animation-duration:0s!important;
		    -webkit-animation-delay: 0s!important;
    animation-delay:0s!important;
}
}

JS Here only change breakpoints for mobile and tablet. Remove elese if content to just disable animations on mobile

<script>
jQuery(document).ready(function(){
if (matchMedia('only screen and (max-width: 768px)').matches) {
    jQuery(".elementor-element").attr("data-settings", '{"_animation_mobile":"none"}');
} else if (matchMedia('only screen and (min-width: 769px) and (max-width: 1366px)').matches){
jQuery(".elementor-element").attr("data-settings", '{"_animation_tablet":"none"}');
}
});</script>

@ofmarconi
Copy link

@ofmarconi ofmarconi commented May 19, 2021

Does anyone know how I can remove the animation delay only on mobile?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet