Add ability to change speed of animations/transitions.

[patricknelson]

Thanks for this amazingly useful and flexible library! With the wide selection, I felt just one minor thing was missing: ability to adjust animation speed.

This PR enables a little extra creative freedom with the ability to simply adjust the built-in animation speeds by a scale factor (with the default being 1x). All this does is multiply all of the existing values by a value that you can provide. That way, you aren't digging too deep in the weeds to manually edit every single value in an attempt to scale it evenly so that everything stays coordinated.

Example 1x scale (default):

$hamburger-scale-speed: 1;

Example 10x scale:

$hamburger-scale-speed: 10;

[mtx-z]

+1 would be a nice setting to have.

[prayaas-a]

@patricknelson could you post a compiled CSS dist for this change?

[patricknelson]

@prayaas-a unfortunately that's a design decision that's entirely up to you. What you'll have to do instead is maybe clone my fork of the repository until @jonsuh decides to merge this change, checkout the branch for this pull request and then tweak the variables yourself and compile it until you get something you like.

Here's at least a quick way to do this yourself. Note you'll need a SCSS/SASS compiler (I strongly prefer libsass based implementations like node-sass since it's really fast, but see here for more easy instructions on how to install: https://sass-lang.com/install).

git clone [email protected]:patricknelson/hamburgers.git
git checkout feature-scale-speed
cd hamburgers

Edit _sass/hamburgers/hamburgers.scss so it contains the speed you want, in this case you're just speeding up or slowing down, e.g.

// Half speed
$hamburger-scale-speed: 0.5;

Then compile it.

sass _sass/hamburgers/hamburgers.scss > your-output-file.css

Good luck! 😉

[prayaas-a]

Thanks for the detailed instructions @patricknelson! I didn't realize the property was SCSS level. :) Will do this.

[cfxd]

Howdy! I love this library and would love to see this feature merged when you have a chance please 🙏🏻

[patricknelson]

Yeah, this has languished for so long (almost 2 years now). It affects a lot of files. So, even though it’s not tremendously complex, it’s prone to going stale as other changes get merged.

@jonsuh would you be willing to give this a quick once-over? It looks like other folks are interested in this too. 😊

[MickL]

Should we fork this project? 2,5 years passed without any response from @jonsuh ...

[patricknelson]

Yeah I'm considering merging this into my master branch in my fork and just linking people there. However, if you want it right now it should be immediately available at the feature-scale-speed branch here: https://github.com/patricknelson/hamburgers/tree/feature-scale-speed

So, for the lazy, go to #73 (comment) for full instructions (including how to edit the SCSS). I just updated it since I forgot to include checking out the branch name @MickL 😬

[patricknelson]

Just FYI @jonsuh I've updated this branch to resolve merge conflicts from the math.div() updates 😄 Would you be willing to take a second look at this please? 🙏 Thank you!