hamburgers icon indicating copy to clipboard operation
hamburgers copied to clipboard

Add ability to change speed of animations/transitions.

Open patricknelson opened this issue 7 years ago β€’ 9 comments

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;

scale speed 1x

Example 10x scale:

$hamburger-scale-speed: 10;

scale speed 10x

patricknelson avatar Feb 09 '19 00:02 patricknelson

+1 would be a nice setting to have.

mtx-z avatar Dec 17 '19 10:12 mtx-z

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

prayaas-a avatar Mar 15 '20 09:03 prayaas-a

@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! πŸ˜‰

patricknelson avatar Mar 16 '20 21:03 patricknelson

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

prayaas-a avatar Mar 17 '20 01:03 prayaas-a

Howdy! I love this library and would love to see this feature merged when you have a chance please πŸ™πŸ»

cfxd avatar Nov 24 '20 08:11 cfxd

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. 😊

patricknelson avatar Nov 24 '20 08:11 patricknelson

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

MickL avatar Aug 23 '21 10:08 MickL

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 https://github.com/jonsuh/hamburgers/pull/73#issuecomment-599762317 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 avatar Aug 23 '21 19:08 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!

patricknelson avatar Apr 23 '22 02:04 patricknelson