[Vincx]

The animations are fun, but very distracting. I’d like to turn them off to keep the focus. Is there a simple way of doing that?

[stevland]

Hi @Vincx,

I knew it was inevitable that someone wouldn’t like the animations. I’m surprised it took this long for someone to say so! And you phrased it very diplomatically hehe.

I think this should include all of the animations, but let me know if you find any stragglers.

/*
STAFF ANIMATIONS
*/

/* default logo, custom text, custom logo */
a#header-logo:hover > #left-logo #header-title,
a#header-logo:focus > #left-logo #header-title,
a#header-logo:active > #left-logo #header-title,
a#header-logo:hover > #left-logo #header-image img,
a#header-logo:focus > #left-logo #header-image img,
a#header-logo:active > #left-logo #header-image img,
a#header-logo:hover > #left-logo #header-default svg,
a#header-logo:focus > #left-logo #header-default svg,
a#header-logo:active > #left-logo #header-default svg,

/* new ticket navigation link*/
a#new-ticket:hover, a#new-ticket:focus, a#new-ticket:active,

/* theme options navigation link */
a#subnav7.theme,

/* buttons and inner down caret */
button.action-button:hover > i.icon-map-marker:before, button.action-button:focus > i.icon-map-marker:before, button.action-button:active > i.icon-map-marker:before,
.action-button:hover > i.icon-caret-down:before, .action-button:focus > i.icon-caret-down:before, .action-button:active > i.icon-caret-down:before,
input[style="color: rgb(255, 0, 0);"],

/* new reply */
.new-reply,

/* pop ups */
#popup,
.modal.fade .modal-dialog,

/* alerts and banners */
#alert,
#msg_info, #msg_notice, #msg_warning, #msg_error, .success-banner, .notice-banner,

/* warning and compliance messages */
#warning_bar,
.compliance-animate
{
animation: none;
}

/*
CLIENT ANIMATIONS
*/

/* alerts and banners */
#msg_info, #msg_notice, #msg_warning, #msg_error, .success-banner, .notice-banner,

/* buttons */
#sign-in-button:hover,
.searchArea button:hover,
#clientLogin input[type=submit]:hover,

/* popups */
div#popup,

/* language flags */
.chevron .button-icon-container
{
animation: none;
}

 

[Vincx]

Sounds like you expected a lot more swearing 🙂

It works mostly, thanks! Mostly, because there were two problems. First is the duplicates in the custom css, which makes it difficult to overrule some items – was easy to fix.

And then there is #popup – these don’t show up anymore. I think it’s initialized outside the screen, and some js drags it in. Got an idea how to fix this?

I think the non-animated version is more clean and also gives the impression to my customers I want to give. Would it be possible to have this as a toggle under the tab “Customize” in a future version?

And thanks for the good work for this plugin! Now my team and I can handle tickets via mobile phone on the train or in the park, we can be more flexible and more responsive – if the animations had to stay, we’d swallow it. 🙂

[stevland]

I trust you figured out how to fix the #popup modal. 

If I was forced to guess off the top of my head as to what went wrong, my theory would be that vanilla osTicket uses its own animation to get the modal onto the screen. So osTicket Awesome simply replace one animation for another. And, by setting #popup to animation: none; we inadvertently broke it altogether.

I do like your idea of toggling animations on/off. I’ve added that to my list of ideas and will consider that for future dev.