how to slow down animations even more.

Site URL: https://coconut-hypersphere-nmr5.squarespace.com/config/

I currently have the horizontal and vertical clip animation on my website however I was wondering if there is a way to slow down the animation even more? Any help would be greatly appreciated.

site password- johnay

I'm looking for the same thing.. If I find a solution I'll post it back.
Animations are way too fast on the image blocks...

Hey @johnay

I'm using collide and have found css to slow it down.
Basic speed is 800ms so just by changing that you can alter the speed (I'm trying 1600ms and it works great)

/*COLLIDE IMAGE POSITION RIGHT*/
.image-block-outer-wrapper.combination-animation-collide.image-position-right .image-inset{

  transition: opacity 1600ms cubic-bezier(.4,0,.2,1),transform 1600ms cubic-bezier(.4,0,.2,1);
    will-change: opacity,transform;
}
.image-block-outer-wrapper.combination-animation-collide.image-position-right .sqs-dynamic-text-container {
    transition: opacity 1600ms cubic-bezier(.4,0,.2,1),transform 1600ms cubic-bezier(.4,0,.2,1);
    will-change: opacity,transform;
}

/*COLLIDE IMAGE POSITION LEFT*/
.image-block-outer-wrapper.combination-animation-collide.image-position-left .image-inset{

  transition: opacity 1600ms cubic-bezier(.4,0,.2,1),transform 1600ms cubic-bezier(.4,0,.2,1);
    will-change: opacity,transform;
}
.image-block-outer-wrapper.combination-animation-collide.image-position-left .sqs-dynamic-text-container {
    transition: opacity 1600ms cubic-bezier(.4,0,.2,1),transform 1600ms cubic-bezier(.4,0,.2,1);
    will-change: opacity,transform;
}

I'm looking now for the same for the "reveal" animation..

Hope this helps.

Fab

alright try this and just change the "800ms" to the speed you want for vertical clip on an image block with text (works with overlap and collage for me) :

.image-block-outer-wrapper.combination-animation-vertical-clip .sqs-dynamic-text-container {
    transition: -webkit-clip-path 800ms cubic-bezier(.4,0,.2,1),clip-path 800ms cubic-bezier(.4,0,.2,1);
    will-change: -webkit-clip-path,clip-path;

I guess for horizontal clip you just have to change to .combination-animation-horizontal-clip

Cheers,

Fab

On 8/7/2020 at 12:38 PM, MidnightClub said:

alright try this and just change the "800ms" to the speed you want for vertical clip on an image block with text (works with overlap and collage for me) :

.image-block-outer-wrapper.combination-animation-vertical-clip .sqs-dynamic-text-container {
    transition: -webkit-clip-path 800ms cubic-bezier(.4,0,.2,1),clip-path 800ms cubic-bezier(.4,0,.2,1);
    will-change: -webkit-clip-path,clip-path;

I guess for horizontal clip you just have to change to .combination-animation-horizontal-clip

Cheers,

Fab

thank you @MidnightClub for the response ! It doesn't seem to work on my site. i have put the code in custom CSS exactly as you said and have changed the speeds nothing is happening.  

Hey @johnay

I can't access your site, tells me I don't have permissions.

Check the site availability in settings, must be on private and not password protected.

If I can have a look I'm sure we can find the right css for you.

Fab

On 8/10/2020 at 10:38 PM, MidnightClub said:

Hey @johnay

I can't access your site, tells me I don't have permissions.

Check the site availability in settings, must be on private and not password protected.

If I can have a look I'm sure we can find the right css for you.

Fab

hi @MidnightClub

I have put it on private now , before it was password protected with the password : johnay

thank you, 

john

Sorry now that i re read myself, it might have been confusing.. if it's in private we can't see it. and i tought it was the setting you had as it says I don't have permissions.

So setting has to be password protected

4 hours ago, MidnightClub said:

Sorry now that i re read myself, it might have been confusing.. if it's in private we can't see it. and i tought it was the setting you had as it says I don't have permissions.

So setting has to be password protected

ok I have set it to password protected with the password :- johnay

alright!

so on your homepage, i saw the blocks with horizontal clip anim. Speed is at 800ms, which I guess is default.

So if you add that to your css it should do the trick:

.image-block-outer-wrapper.combination-animation-horizontal-clip .image-block-wrapper{
transition: -webkit-clip-path 3600ms cubic-bezier(.4,0,.2,1),clip-path 3600ms cubic-bezier(.4,0,.2,1);
}

.image-block-outer-wrapper.combination-animation-vertical-clip .image-block-wrapper{
transition: -webkit-clip-path 3600ms cubic-bezier(.4,0,.2,1),clip-path 3600ms cubic-bezier(.4,0,.2,1);
}

I set it to 3600ms so that the difference is obvious, for both horizontal and vertical clip animation. So you just have to change that value to change the speed.

Let me know if it work.

Cheers,
Fab

12 minutes ago, MidnightClub said:

alright!

so on your homepage, i saw the blocks with horizontal clip anim. Speed is at 800ms, which I guess is default.

So if you add that to your css it should do the trick:

.image-block-outer-wrapper.combination-animation-horizontal-clip .image-block-wrapper{
transition: -webkit-clip-path 3600ms cubic-bezier(.4,0,.2,1),clip-path 3600ms cubic-bezier(.4,0,.2,1);
}

.image-block-outer-wrapper.combination-animation-vertical-clip .image-block-wrapper{
transition: -webkit-clip-path 3600ms cubic-bezier(.4,0,.2,1),clip-path 3600ms cubic-bezier(.4,0,.2,1);
}

I set it to 3600ms so that the difference is obvious, for both horizontal and vertical clip animation. So you just have to change that value to change the speed.

Let me know if it work.

Cheers,
Fab

it worked ! thank you @MidnightClub 

all the best, 
John

Yeah! 

Glad I could help @johnay!

Take care

Fab
 

@MidnightClub Is the code similar for "Fade-in" Im needing to do the same thing but for a fade in animation

On 8/14/2020 at 12:01 AM, MidnightClub said:

alright!

so on your homepage, i saw the blocks with horizontal clip anim. Speed is at 800ms, which I guess is default.

So if you add that to your css it should do the trick:

.image-block-outer-wrapper.combination-animation-horizontal-clip .image-block-wrapper{
transition: -webkit-clip-path 3600ms cubic-bezier(.4,0,.2,1),clip-path 3600ms cubic-bezier(.4,0,.2,1);
}

.image-block-outer-wrapper.combination-animation-vertical-clip .image-block-wrapper{
transition: -webkit-clip-path 3600ms cubic-bezier(.4,0,.2,1),clip-path 3600ms cubic-bezier(.4,0,.2,1);
}

I set it to 3600ms so that the difference is obvious, for both horizontal and vertical clip animation. So you just have to change that value to change the speed.

Let me know if it work.

Cheers,
Fab

Hey Fab,

This looked great, is it possible to make it work on a scroll? So it vertically clips when the page is scrolled down and reversed when scroll up!

On 2/11/2021 at 8:33 PM, kayleep1987 said:

@MidnightClub Is the code similar for "Fade-in" Im needing to do the same thing but for a fade in animation

Exactly what I'm looking for, too!

Hello,

I´m looking for two things.

1.: to slow down the overall fade-in animation in the design of my webpage. It feels rather abprupt at the moment. Is this code working for that or is it specific for certain blocks? 

2.: I´m looking for a possibility to slow down the fade-in of slidergallery.

If the code above is possible to use for that, ca someone tell me how to apply it?

All the best

and thank you so much,

Julia

On 8/7/2020 at 1:11 PM, MidnightClub said:

Hey @johnay

I'm using collide and have found css to slow it down.
Basic speed is 800ms so just by changing that you can alter the speed (I'm trying 1600ms and it works great)

/*COLLIDE IMAGE POSITION RIGHT*/
.image-block-outer-wrapper.combination-animation-collide.image-position-right .image-inset{

  transition: opacity 1600ms cubic-bezier(.4,0,.2,1),transform 1600ms cubic-bezier(.4,0,.2,1);
    will-change: opacity,transform;
}
.image-block-outer-wrapper.combination-animation-collide.image-position-right .sqs-dynamic-text-container {
    transition: opacity 1600ms cubic-bezier(.4,0,.2,1),transform 1600ms cubic-bezier(.4,0,.2,1);
    will-change: opacity,transform;
}

/*COLLIDE IMAGE POSITION LEFT*/
.image-block-outer-wrapper.combination-animation-collide.image-position-left .image-inset{

  transition: opacity 1600ms cubic-bezier(.4,0,.2,1),transform 1600ms cubic-bezier(.4,0,.2,1);
    will-change: opacity,transform;
}
.image-block-outer-wrapper.combination-animation-collide.image-position-left .sqs-dynamic-text-container {
    transition: opacity 1600ms cubic-bezier(.4,0,.2,1),transform 1600ms cubic-bezier(.4,0,.2,1);
    will-change: opacity,transform;
}

I'm looking now for the same for the "reveal" animation..

Hope this helps.

Fab

 

Can you tell me, where I should add the code? Best regards, Julia

On 1/31/2022 at 2:21 AM, puslingpaahaender said:

Can you tell me, where I should add the code? Best regards, Julia

 

Design > Custom CSS

On 1/18/2022 at 1:51 PM, Poppyseeds said:

Exactly what I'm looking for, too!

I'm also looking for help with the fade in animation to slow it down!

On 8/13/2020 at 8:01 AM, MidnightClub said:

alright!

so on your homepage, i saw the blocks with horizontal clip anim. Speed is at 800ms, which I guess is default.

So if you add that to your css it should do the trick:

.image-block-outer-wrapper.combination-animation-horizontal-clip .image-block-wrapper{
transition: -webkit-clip-path 3600ms cubic-bezier(.4,0,.2,1),clip-path 3600ms cubic-bezier(.4,0,.2,1);
}

.image-block-outer-wrapper.combination-animation-vertical-clip .image-block-wrapper{
transition: -webkit-clip-path 3600ms cubic-bezier(.4,0,.2,1),clip-path 3600ms cubic-bezier(.4,0,.2,1);
}

I set it to 3600ms so that the difference is obvious, for both horizontal and vertical clip animation. So you just have to change that value to change the speed.

Let me know if it work.

Cheers,
Fab

Could you help me with the fade transition? i cant figure out how to slow it down

Has any one figured out code to slow down the fade-up of the buttons? 

I'm also interested in slowing down the fade up of paragraph text.