Two different animations on page load

Bobcat132

Hello,

Does anyone know how it would be possible to achieve animation on page load as seen on this SmugMug website: www(dot)chrisburkard(dot)com - I cannot post links yet, so sorry for this formatting.

I'm interested in both logo animation and navigation menu dropdown animation.

Thank you for your time!

Best regards,
Alan

Hikin' Mike

Somebody else asked about that about a year ago, so I messed around a bit. I gave up, it's "beyond my pay grade"....lol!

Why don't you contact him?

Bobcat132

That is actually a good idea Mike. I'll try to contact him :)

Hikin' Mike

Make sure you report back if he responds. I don't want to do that for my site, but I'm just curious.

jerryr

Hi - it looks like it was accomplished using the CSS Transform property.
Read more about it here.

https://css-tricks.com/almanac/properties/t/transform/

jerryr

For the header - looks like something such as

.sm-page-layout-region-header .sm-page-layout-region-top .sm-page-layout-row
{
transform: translateY(-150px);
}

.sm-page-initialized .sm-page-layout-region-header .sm-page-layout-region-top .sm-page-layout-row
{
transform: translateY(0px);
width: 100%;
transition-property: transform;
transition-duration: 1s;
transition-timing-function: ease;
transition-delay: 3.5s;
height: 95px;
}