Disable site-Wide animation doesn’t work on vc_custom_headings with animation

[technitoit]

Hello,

I’ve noticed that custom headings still have animation on it even when the option “Disable on mobile devices only” or “Disable on all devices” are checked. It’s an issue on one page designs on mobile, because my headings takes a lot of time to appear on some devices. For now I double the heading, one with animation with visibility on computer and one with no animation with visibility on mobile devices. It works but I’m not sure about the quality of this kind of thing regarding SEO.

[Laura]

Hello, will assign the ticket to a higher support level who can help and advise you in your query.
Thanks! ?

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[technitoit]

Thank you, let me know if they find a solution.

[Radu]

Hi,

Add this css in quick css area

COPY CODE

.animated,.wpb_animate_when_almost_visible  {
 /*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;
 opacity: 1 !important;
 filter:none !important;
 
 }

IF you want to turn off only on mobile devices use the next css

COPY CODE

* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
	.animated,.wpb_animate_when_almost_visible  {
 /*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;
 opacity: 1 !important;
 filter:none !important;
 
 }
}

The CSS will be added to wp-admin -> theme options -> general settings -> quick css

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[technitoit]

Wow, that was quick, thanks a lot. Tested and works well now.
I found this bug on custom titles, but maybe there’s other elements that have the same bug. Does the css fixes all kind of situations ?
Will that be corrected on the next update of the theme maybe ?
Have a good day and thanks for your time.

[Radu]

Hi,

I’ve targeted also the class ‘wpb_animate_when_almost_visible’ which thru this class some animations are applied and that it’s added by the visual composer for all their elements that have set animation for animate when almost visible.

The css rule should fix that!

Let me know if you notice a problem on any element

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[technitoit]

Ok thanks for the precisions. Is it planed to be part of an update of the theme, or will I need to do this hack everytime ?

[Radu]

You will have to add the css on every install, but if you will use kleo child and you will paste the css to wp-content/themes/kleo-child/style.css will be keep even if you update the theme.

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[Author]

Posts