Jump to content

Slow down Accordion block animations

Recommended Posts

Hey all,

So, I'm just upgrading my personal site to 7.1 now. Right now I just have a basic teaser landing page with an accordion block to open up my bio. My issue is that the Accordion block's animations are so quick and I'd really like to be able to smoothly slow them down to 1s long. But I can't find a way to do it smoothly whatever I try.

If anyone could help that would be amazing!

 

URL is https://www.joshuahext.com/, there's no password needed.

Edited by joshuahext
Adding more detail to the question.
Link to comment
  • joshuahext changed the title to Slow down Accordion block animations
  • Replies 3
  • Views 1.8k
  • Created
  • Last Reply

Top Posters In This Topic

Here are a few soft solutions, but not sure if they are ideal for what you're trying to accomplish:

Option 1:

.sqs-block-accordion .accordion-item__dropdown--open {
    transition-property: visibility, opacity !important;
    transition-timing-function: linear !important;
    transition-duration: .5s, 2s !important;
    transition-delay: 2s, .5s !important;
}

Option 2:

.accordion-item__dropdown--open {
    transition: all ease-in-out 3s !important;
}

You might have to adjust the height of the accordion and a few other things to get the effect just right...

Edited by DPruitt
Link to comment
17 hours ago, DPruitt said:

Here are a few soft solutions, but not sure if they are ideal for what you're trying to accomplish:

Option 1:

.sqs-block-accordion .accordion-item__dropdown--open {
    transition-property: visibility, opacity !important;
    transition-timing-function: linear !important;
    transition-duration: .5s, 2s !important;
    transition-delay: 2s, .5s !important;
}

Option 2:

.accordion-item__dropdown--open {
    transition: all ease-in-out 3s !important;
}

You might have to adjust the height of the accordion and a few other things to get the effect just right...

Hey, thanks for getting back to me! Unfortunately neither of those work. They both fade in the drop down after it's quickly swiped in. I'm looking to slow down that standard swipe animation itself. 

Can you possibly help with that?

Link to comment
  • 2 months later...
On 8/23/2023 at 11:24 AM, joshuahext said:

Hey, thanks for getting back to me! Unfortunately neither of those work. They both fade in the drop down after it's quickly swiped in. I'm looking to slow down that standard swipe animation itself. 

Can you possibly help with that?

I'm looking for assistance with this too.

Link to comment

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.