ctrl-freaks / freezeframe.js

freezeframe.js is a library that pauses animated .gifs and enables them to animate on mouse hover / mouse click / touch event, or with trigger / release functions.
http://ctrl-freaks.github.io/freezeframe.js/
MIT License
1.41k stars 111 forks source link

Add support for fractional width and height values #90

Closed Mitsunee closed 3 years ago

Mitsunee commented 3 years ago

I just found the demo page on an article and noticed the image jumps a bit when pausing, so I decided to look into it and found that the way the width and height are read is what a property that only supports integers. With responsive widths it's common to have floating point numbers, so getClientRects() has a much cleaner result. Hope this helps, I'll definitely be trying this library if I ever have a gif somewhere (:

Edit: just noticed this doesn't yet fully fix it on the 2nd example on the demo page, maybe inline-styles should be used to set the dimensions of the canvas? implemented and hopefully works now, also added explanations in the commit

Mitsunee commented 3 years ago

Should work now, can be merged if you like it :)

nickforddev commented 3 years ago

thank you @Mitsunee!