Animate the tagline - UXL Themes

Tagged: Animate Tagline

This topic has 6 replies, 2 voices, and was last updated 7 years, 7 months ago by lbeerco-venango-pa-us.

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

Author

Posts
May 11, 2017 at 3:06 pm #1512

lbeerco-venango-pa-us
Participant

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?

May 11, 2017 at 4:18 pm #1515
Andy
Keymaster
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;
}
```
May 11, 2017 at 8:44 pm #1522

lbeerco-venango-pa-us
Participant

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.

May 11, 2017 at 9:35 pm #1525

Andy
Keymaster

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.

May 12, 2017 at 1:23 pm #1526

lbeerco-venango-pa-us
Participant

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

May 12, 2017 at 2:38 pm #1528
Andy
Keymaster
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
May 12, 2017 at 2:47 pm #1529

lbeerco-venango-pa-us
Participant

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

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

The topic ‘Animate the tagline’ is closed to new replies.