Animate the tagline

[lbeerco-venango-pa-us]

I would like my tagline to zoom out upon scrolling. I have downloaded AnimateIt! but I find no place to animate the tagline in the header. Is this possible?

 

[Andy]

No need to download AnimateIt! as Exoplanet loads it’s own animation stylesheet.

Try adding this in Appearance > Customize > Additional CSS

#masthead.scrolled .site-description {
	-webkit-animation-name: zoomOut;
	animation-name: zoomOut;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}

[lbeerco-venango-pa-us]

Thank you Andy. This worked for me. Is there a way to get it to scroll the whole way across the header. We kind of want it to look like a car peeling out.

Thanks again for all of your help today.

 

 

 

[Andy]

I think the effect you are looking to achieve would be beyond the scope of minor CSS modifications and beyond our support policy.

It would require custom coding and testing, and an option would maybe find a reputable freelance coder on Upwork for this kind of custom service.

[lbeerco-venango-pa-us]

Okay thank you. One more question. Is there a way to zoomOut the whole way across the header?

 

[Andy]

After thinking about this some more, try this instead:

#masthead.scrolled .site-description {
	-webkit-animation-name: lbeercustomzoom;
	animation-name: lbeercustomzoom;
	-webkit-animation-duration: 2s;
	animation-duration: 2s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}

@-webkit-keyframes lbeercustomzoom {
  10% {
	opacity: 1;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
  }

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

@keyframes lbeercustomzoom {
  10% {
	opacity: 1;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
  }

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

Not sure if that’s the effect you’re after, but you can experiment with different values for animation-duration and translate3d

[lbeerco-venango-pa-us]

Andy, thank you so much. That is exactly what I was looking for. I really appreciate your help and for going above and beyond.

Thanks again.

 

[Author]

Posts