Control speed of transition

[Dan-GG]

I don't seem to find a way of controling the time the transition takes to complete/ the speed of the burger.
Is this really missing?

[jonsuh]

@Dan-GG Unfortunately that feature was never included. Many of them have very specific and intricate timelines, and adding the ability to customize the transition times is not a simple task considering the transitions are pure CSS.

For example, if you look at the source for one of the more complex animations like collapse, each part of the hamburger has very specific transition durations and delays, and they are different for when it goes from a hamburger to an X vs an X to a hamburger.

[Dan-GG]

I found a rather simple way of working around the lack of this feature:
All you have to do is enclose within parentheses every time you state the speed or delay of anything and multiply it times $speed, which by default is 1. (0.5 = half the speed; 2 = twice the speed).
The final result is this:

/*example from .burger--emphatic*/
/*I also added transition and transform mixins for vendor prefixes*/
.burger-inner {
   @include transition(background-color (0.2s * $speed) (0.25s * $speed) ease-in);
}

Also, deviating radically from the topic, I want to say I am a fan of your project 100 Days of Scripture, it was truly inspiring at a personal level.

[patricknelson]

I've implemented this feature in PR #73. My implementation (coincidentally) was similar to @Dan-GG's. Basically, it's just a linear scaling factor. By default, everything is based on 1s but if you simply scale ALL durations uniformly, it stays coordinated.

See #73 for examples! 😄