Header logo animation on scroll

Store Design
, ,
1

Hey guys, so I’m trying to the logo animation like on the Gucci website, where at first the Logo is on the page itself and once you scroll down it goes to the header as normal, this is what I mean: https://www.gucci.com/pt/en_gb/

Is there anyway to do it here? Thank you in advance

1 Like
2

To achieve that affect in your header, you need use a large SVG in the header that shrinks when you scroll down, you can use CSS transitions along with JavaScript to add a class when the page is scrolled. Here’s a simple example:



header {
    position: fixed;
    width: 100%;
    transition: all 0.3s ease;
}

#logo-container {
    transition: all 0.3s ease;
    width: 100%;
    transform: translate3d(0px, 24px, 0px);
    height: auto;
}

.scrolled#logo-container {
    width: 143px;
    height: 0px;
    transform: translate3d(0px, -24px, 0px);
}

window.addEventListener('scroll', () => {
    const header = document.querySelector('header');
    if (window.scrollY > 50) header.classList.add('scrolled');
    else header.classList.remove('scrolled');
});
3

This is Noah from PageFly - Shopify Page Builder App

I can help you. Please can you provide the website url. Thank you.

Best regards,

Noah | PageFly

4

I’m not exactly sure how to do it, can I send the link to you so you can give me a hand?