Jump to content

Custom CSS transitions not working

Recommended Posts

Site URL: https://www.kindred.work/servicesv2

Hi 🙂 

I've created 3 custom modals to pop up on a button click by adding a .active class to the modal container. 

The CSS I've used to achieve this is as follows: 

 #coach-wrapper {
    left: 100vw;
    opacity: 0;
    transition: all 0.3s ease-in-out;
  }
  #coach-wrapper.active{
    opacity: 100%;
    display: flex;
    position: relative;
    z-index: 1000;
    left: 0;
  }

I expected the modal to slide in from the left however it currently just immediately appears on the page with no transition. 

Any advice on how to achieve such a transition would be greatly appreciated! 

 

Link to comment
  • Replies 1
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.