How can I create a header logo animation on scroll?

Store Design

Topic summary

A user seeks to replicate Gucci’s header logo scroll animation for their Shopify store. The animation involves the logo changing size/position as users scroll down the page.

Proposed Solution:

  • Add an id="stickyNav" attribute to the header logo element in header.liquid
  • Replace the existing class with specific inline styles (positioning, font-size, transitions)
  • Insert CSS code for fixed positioning and smooth transitions into header.liquid
  • Hide duplicate logo elements using CSS targeting

Implementation Details:

  • Locate class="header__heading-link link link--text focus-inset" (appears twice)
  • Apply the new ID and styles to both instances
  • Add CSS block above line 85 in header.liquid to hide secondary logo wrapper

Current Status:
The original poster reported the initial code didn’t work. After troubleshooting via private message and additional CSS adjustments, the discussion remains open. A third party has expressed interest in the same animation implementation.

Summarized with AI on October 29. AI used: claude-sonnet-4-5-20250929.
1

Hi, I’m trying to recreate a header-logo animation on scroll, similar to the Gucci website: https://www.gucci.com/nl/en_gb/?gad_source=1&gclsrc=ds Can you help me create this? Thank you in advance.

2

Yes I can Help You

3

Perfect, how?

4

Where in the site do you want to create this animation

5

Header, where my logo is. Same as the Gucci site

6

Okay You Say I all Code Give you DIrect Without Site,
Same as Gucci

7

I’m sorry I don’t understand what you mean, Yes i just want a code to implement in base.css/theme.liquid/headercss etc. But I want the animation exactly the same, where i can change it to my logo instead on Gucci ‘ do you understand me? I’m sorry for my english.

8

Okay, Your Code Is ready Bro, Please My Code Works Perfectly! where you Coffee with Me bro

9

Perfect, can you show me how the code works? What it is? Where to implement?

10

This Is Script Use It in Header.liquid
11

It doesn’t work

12

should i send you a link of my website in pm?

13

First You Put Header.liquid Logo Add id and this code than add css after Work this Code

First You Find This Class Name

class="header__heading-link link link--text focus-inset"

This Class Name Total Two And You Both Same Change

Replace By This Code

id="stickyNav" style="top: -50px; font-size: 500px; color: white; width:100%" class="header__heading-link link link--text focus-inset"

And Than Add Css Above Of the header.liquid above code Style inner Put

#stickyNav {
    position: fixed;
    font-size: 80px;
    width: 100%;
    text-align: center;
    transition: top 1s ease, font-size 1s ease; 
}
14

Okay

15

Sent

16

add This css Code in Header.liquid FIle

line 85 :–> /* Logo Text */ "
Below Past This Code

header.header h1.header__heading:nth-child(4) .header__heading-logo-wrapper {
    display: none;
}
17

Hi @Raj-webdesigner , I tried to contact you through email but your email adress doesnt seem to work. How can we get in contact? I’m looking for a developer who can implement exact this animation for me.

Thank you

18

Yes Sure.