Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

how to slow down animations even more.


johnay

Question

  • Answers 11
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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

Yeah!  Glad I could help @johnay! Take care Fab  

Posted Images

11 answers to this question

Recommended Posts

  • 0

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

 

Link to post
  • 0

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

Edited by MidnightClub
Correction
Link to post
  • 0
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.  

Link to post
  • 0

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

Link to post
  • 0
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

Link to post
  • 0

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
1715793855_Capturedecran2020-08-12a15_34_19.thumb.png.22f170767ac9dd976afc26f7630c3e44.png

Link to post
  • 0
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
1715793855_Capturedecran2020-08-12a15_34_19.thumb.png.22f170767ac9dd976afc26f7630c3e44.png

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

Link to post
  • 0

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

Link to post
  • 0
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

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...