JA VITAL - ACM Module - Hero - text fade in out / animation

ramsey1971

Good afternoon,
I am looking to add an animation effect to the ACM module, HERO style 1. I managed to achieve that on the home page but cannot on the others, Is that because the home page is built with the T4 page builder? is there a way I can add animation effects to the text box in the module?
Many thanks,
Mark

saguaros

Hi Mark,

Could you clarify in details so I can check?

1 -- Which module doesn't work?
2 -- How did you add animation effect?

ramsey1971

Morning,

thanks for the reply:
I added this to custom CSS:
.lead {
font-size: 1.143rem;
font-weight: 500;
text-align: left;
color: #fff;
transition-duration: 3s;
-webkit-animation-duration: 3s;
animation-duration: 3s;
animation-name: fadeInLeft;
animation-timing-function: ease-in-out;
animation-iteration-count: 1;
}
and the modules are ACM modules using masthead position - for example:
http://join.web4therapists.co.uk/index.php/autism-assessments/adult-autism-assessments

Hope that helps?

Regards,
Mark

saguaros

ramsey1971 Let me check and will get back to you.

ramsey1971

saguaros
Hi, any news?

saguaros

ramsey1971 The animation supported by builder only so that when you add to template, it doesn't work.

I just added this custom CSS for that animation:

@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-15%, 0, 0);
    transform: translate3d(-15%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-15%, 0, 0);
    transform: translate3d(-15%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}

It's working now, kindly check.

ramsey1971

Many thanks