Adding animation to the footer

Store Design
, , , , , , , , , , , ,

Topic summary

CreatorTim successfully implemented collapsible footer menus on mobile but needs help adding smooth expand/collapse animations. The “STORE” section already has animation, while “LEGAL” doesn’t—they want to apply the same animation effect to both sections.

Current Status:

  • Collapsible functionality works via custom code added to footer.liquid
  • Animation inconsistency exists between footer sections
  • Mobile-only implementation desired

Technical Details:
CreatorTim shared their complete CSS and JavaScript code, which includes:

  • Media query targeting mobile devices (max-width: 749px)
  • CSS transitions for visibility, opacity, and height
  • JavaScript event listeners for collapse/expand functionality
  • Plus/minus indicators for collapsed/expanded states

EstherBui initially suggested the animation difference stems from using different themes compared to the reference store, implying exact replication may not be possible. However, CreatorTim clarified they built the collapsible feature themselves and simply need animation consistency across sections.

Resolution Status: Open—awaiting guidance on applying uniform animations to all collapsible footer sections.

Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.
1

Hey guys, I made my menus in the footer work as collapsible content on mobile, and now I want to add a smooth animation for expanding them.

Under “STORE,” there’s already an animation, but under “LEGAL,” there isn’t any. Maybe it’s enough to apply the same animation from “STORE” to “LEGAL.”

Here’s a store where it works well on mobile, so I’d like a similar animation: https://tomnoske.store/collections/all-products (Check it out in the mobile version)

And here’s my store: https://1049xn-ya.myshopify.com/collections/all
(Check it out in the mobile version)

WANT IT ONLY ON MOBILE!

If needed, I can provide the code I added at the end of the footer.liquid file to make it work as collapsible content.

Thanks so much for your help,
Tim

2

Hi CreatorTim

Regarding your issue, you and this store are using two different themes (https://prnt.sc/sScXFvneEL2X). Therefore, the theme codes are also different, which results in different animations and logic. You won’t be able to set it up exactly like this theme. You can only match simple elements like fonts, images, etc.

Best,
Esther

3

Hey, I set it up myself. Here’s the code I added at the end of the footer liquid to make it work as collapsible content. Now, I just want to add an animation to it, so there must be a way to do it.

Under “STORE,” there’s already an animation, but under “LEGAL,” there isn’t any. Maybe it’s enough to apply the same animation from “STORE” to “LEGAL.”

Here’s the code I used:

@media (max-width: 749px) { .grid .footer-block.grid__item { margin: 0; } .grid .footer-block__heading { position: relative; margin: 0; padding: 1.5rem 0; cursor: pointer; } .grid .footer-block__heading::after { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 20px; text-align: center; } .grid .footer-block__heading:not(.block-collapsed)::after { content: "-"; } .grid .footer-block__heading.block-collapsed + .footer-block__details-content { visibility: hidden; opacity: 0; height: 0; margin: 0; padding: 0; transition: all .2s ease-out; overflow: hidden; } .grid .footer-block__heading + .footer-block__details-content { visibility: visible; opacity: 1; height: auto; transition: all .2s ease-out; overflow: hidden; margin-bottom: 3rem; } }

Thanks,
Tim