adding animation to footer menus

Store Design
, , , , , , , , ,
1

Hi,

I need help with adding animation to my footer menu, similar to the animation used in the main menus in the header.

Any help is greatly appreciated

link: https://testingstoresandthemes.myshopify.com/

storefront password: 12345

screencapture-testingstoresandthemes-myshopify-2024-10-22-16_12_05 copy.jpg
screencapture-testingstoresandthemes-myshopify-2024-10-22-16_12_05 copy.jpg1920×1789 299 KB

2

Hey @technase ,

To help you add animations to your footer menu similar to the main header menu, here’s a general approach based on common animation techniques that can be implemented with CSS:

/* General footer link styles */
.footer-block .animate-footer-link {
  position: relative;
  opacity: 0; /* Start with invisible links */
  transform: translateY(20px); /* Initial position for sliding in */
  transition: transform 0.5s ease, opacity 0.5s ease;
}

/* Trigger the slide-in when footer is in view */
.scroll-trigger.animate--slide-in .footer-block .animate-footer-link {
  opacity: 1; /* Fade in */
  transform: translateY(0); /* Slide to the final position */
}

/* Adding hover effect to animate link colors */
.footer-block .animate-footer-link:hover {
  color: #ff0000; /* Customize hover color */
  text-decoration: underline; /* Optional */
}

If I was able to help you, please don’t forget to Like and mark it as the Solution!

Best Regard,

Rajat Sharma

3

Hello @technase ,
firstly remove this and add below i have given,

@media screen and (min-width: 750px) {
    .footer-block__details-content .list-menu__item--link:hover, .copyright__content a:hover {
        text-decoration: underline; 
       text-underline-offset: .3rem; 
    }
}

footer .footer-block__details-content a{
 position: relative;
}

footer .footer-block__details-content a::after {
    content: ' ';
    position: absolute;
    width: 0;
    height: 2px;
    background: #000;
    top: 70%;
    left: 0;
    transition: all ease 0.3s;
    -webkit-transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
}

footer .footer-block__details-content a:hover::after{
  width: 100%;
}

check this recording for result : https://www.awesomescreenshot.com/video/32813231?key=5f94425164e14c9c65e15faa8ebd0297

1 Like
4

This is perfect. Thank you so much.

1 Like