Menu icon Foundation
Changing easeIn timing for templates

Hi there,
I'm trying to change the timing on the easeIn property but can't seem to figure out where that is.
I want it to be a bit more pronounced. Come in a bit slower and easing in quicker. I want the ease in part to be a lot more pronounced.

is it possible to change the timing?

I have the bellow code

.customSlideIn {
  @include slide(
    $dir: in, // Specify in or out
    $from: left, // Can be top, right, bottom, or left
    $fade: false, // If true, the element fades simultaneously
    $duration: 0.8s,
    $timing: easeIn
  );
}
            

         

I want to add the timing to be something like this

-webkit-transition: all 500ms cubic-bezier(0.420, 0.000, 1.000, 1.000); 
   -moz-transition: all 500ms cubic-bezier(0.420, 0.000, 1.000, 1.000); 
     -o-transition: all 500ms cubic-bezier(0.420, 0.000, 1.000, 1.000); 
        transition: all 500ms cubic-bezier(0.420, 0.000, 1.000, 1.000); /* ease-in */
            

         

How can I integrate it?

Thanks in advance!

easeintransition

Hi there,
I'm trying to change the timing on the easeIn property but can't seem to figure out where that is.
I want it to be a bit more pronounced. Come in a bit slower and easing in quicker. I want the ease in part to be a lot more pronounced.

is it possible to change the timing?

I have the bellow code

.customSlideIn {
  @include slide(
    $dir: in, // Specify in or out
    $from: left, // Can be top, right, bottom, or left
    $fade: false, // If true, the element fades simultaneously
    $duration: 0.8s,
    $timing: easeIn
  );
}
            

         

I want to add the timing to be something like this

-webkit-transition: all 500ms cubic-bezier(0.420, 0.000, 1.000, 1.000); 
   -moz-transition: all 500ms cubic-bezier(0.420, 0.000, 1.000, 1.000); 
     -o-transition: all 500ms cubic-bezier(0.420, 0.000, 1.000, 1.000); 
        transition: all 500ms cubic-bezier(0.420, 0.000, 1.000, 1.000); /* ease-in */
            

         

How can I integrate it?

Thanks in advance!

Geoff Kimball almost 4 years ago

easeIn is an easing built-in to CSS, so you can't change it. You'll need to create your own cubic bezier function and pass it to the $timing parameter.