Disable icon load animation on a specific page only - Support

Tagged: animation, disable, icons, page load

Viewing 8 posts - 1 through 8 (of 8 total)

Author

Posts
June 28, 2017 at 5:39 pm #814002
cordellbrewer
Participant
Hi,

I am trying to disable the icon pop-in animation and the fact that they only load when they come into view – but on a specific page only.
I currently have this bit of CSS:
```
.avia_transform .av_font_icon, .avia_transform .avia_start_delayed_animation.av_font_icon {
    opacity: 1 !important;
    -moz-transform: scale(1) !important;
    -webkit-transform: scale(1) !important;
    -ms-transform: scale(1) !important;
    transform: scale(1) !important;
    -webkit-animation: none;
    -moz-animation: none;
    -msanimation: none;
    animation: none;
}
```
This does work. But for all pages.

My page ID is 799. So I tried this:
```
.page-id-799 .avia_transform .av_font_icon, .page-id-799 .avia_transform .avia_start_delayed_animation.av_font_icon {
    opacity: 1 !important;
    -moz-transform: scale(1) !important;
    -webkit-transform: scale(1) !important;
    -ms-transform: scale(1) !important;
    transform: scale(1) !important;
    -webkit-animation: none;
    -moz-animation: none;
    -msanimation: none;
    animation: none;
}
```
I have added the page ID but it doesn’t seem to work. Please could you kindly assist.

Thank you.
June 29, 2017 at 7:09 am #814260
Jordan Shannon
Inactive Moderator
Hey Cordell,

Could you attempt to target the post entry instead:
```
.post-entry-799
```
Best regards,
Jordan Shannon
June 29, 2017 at 8:30 am #814272
cordellbrewer
Participant
Hi Jordan,

Still not working.
Is the syntax correct?
```
.post-entry-799 .avia_transform .av_font_icon, .post-entry-799 .avia_transform .avia_start_delayed_animation.av_font_icon {
    opacity: 1 !important;
    -moz-transform: scale(1) !important;
    -webkit-transform: scale(1) !important;
    -ms-transform: scale(1) !important;
    transform: scale(1) !important;
    -webkit-animation: none;
    -moz-animation: none;
    -msanimation: none;
    animation: none;
}
```
I have Custom Classes enabled so I could give this element a custom class? If you could then provide the syntax I would need for that.

Thanks.
June 29, 2017 at 1:11 pm #814421
Sarah
Inactive Moderator
Hi!

You were almost there the first time! You just had to switch some selectors around.
Please try this instead:
```
.avia_transform .page-id-799  .av_font_icon,
.avia_transform .page-id-799 .avia_start_delayed_animation.av_font_icon {
    opacity: 1 !important;
    -moz-transform: scale(1) !important;
    -webkit-transform: scale(1) !important;
    -ms-transform: scale(1) !important;
    transform: scale(1) !important;
    -webkit-animation: none;
    -moz-animation: none;
    -msanimation: none;
    animation: none;
}
```
In case you were wondering what happened: avia_transform is a class of the <HTML> tag, and page-id-799 is a class of the <body> tag. So avia_transform had to go first before page-id-799.

Please let us know if you need further help!

Best regards,
Sarah
June 29, 2017 at 1:22 pm #814431

cordellbrewer
Participant

Hi Sarah,

Thanks so much! It works perfectly. The explanation is also SUPER helpful :)

One last thing: I would like to disable the same stuff on the Payroll page dot icons I have used as bullets but if I do then the transform: rotate(45deg) CSS I use for those icons doesn’t take effect.

Any ideas?

Thanks.

June 29, 2017 at 1:37 pm #814450
Sarah
Inactive Moderator
Hi,

Have you tried replacing transform: scale(1) with transform: rotate(45deg) instead?

If I understood correctly, that should fix it! :) The code then becomes like this:
```
.avia_transform .page-id-192  .av_font_icon,
.avia_transform .page-id-192 .avia_start_delayed_animation.av_font_icon {
    opacity: 1 !important;
    -moz-transform: scale(1) !important;
    -webkit-transform: scale(1) !important;
    -ms-transform: scale(1) !important;
    transform: rotate(45deg) !important;
    -webkit-animation: none;
    -moz-animation: none;
    -msanimation: none;
    animation: none;
}
```
Please let me know if that’s what you were trying to do, or if I understood wrong!

Best regards,
Sarah
June 29, 2017 at 2:19 pm #814487

cordellbrewer
Participant

Hi Sarah,

That’s perfect!

Thank you so, so much for your help. I really appreciate it :)

Have a great day.

June 29, 2017 at 2:56 pm #814500

Sarah
Inactive Moderator

You’re very welcome! If you have any other questions, please feel free to open a new thread.

We’d also appreciate it if you can take a moment to review our theme if you haven’t already. https://themeforest.net/downloads 

For your information, you can take a look at Enfold documentation here – http://kriesi.at/documentation/enfold/

Thank you for using Enfold.

Cheers!
Sarah
Author

Posts

Viewing 8 posts - 1 through 8 (of 8 total)

The topic ‘Disable icon load animation on a specific page only’ is closed to new replies.