Comments (10)
I'm having a similar problem. My GIF won't start on page load. The Stop Start buttons from the example code work fine. I've tried all variations of:
//manual.toggle();
//manual.stop();
manual.start();
document.querySelector('.start').click();
Page here: https://maxdatabook.com/staticpages/docaa_example01.html
from freezeframe.js.
@maxrottersman I gave up using the autoplay, however, I think what interrupts the autoplay is the responsive: true
option. When it gets scaled to width: 100% interruption occurs. Try to disable the responsive option and see if it gets fixed, then do a workaround to make it scale 100% width.
here's what I ended up with: https://trends.jawab.app/Mahmoud-8o/post/5f60d859357c0
from freezeframe.js.
Thanks! Yes, when I set responsive: false it runs on page load, but then I can't get the buttons to work, even if I try to set responsive back to true multiple ways. I'm no js expert.
from freezeframe.js.
I'm wondering what you are hoping to accomplish here. If you are looking to autoplay the gif, and then allow the user to pause it on click, that is a new feature that will have to be considered in the core library, mainly because the default control mechanism is hover, which doesn't really fit an autoplay model.
from freezeframe.js.
I don't look a gift-horse in the mouth ;) Yes, I want it to start as autoplay and then have some way for a person to "freeze" the frame so they can look at it more closely. My animated GIFs are charts. If they have to hit a button to start, I'd just as soon create HTML movies or JS slide shows. Anyway, I've moved on. But if the developer creates this feature I'll revisit.
from freezeframe.js.
@nickforddesign Nothing much, except for (I will write the same issue again):
- GIF is getting paused after programmatically playing it.
- As @maxrottersman has mentioned, setting responsive to false disables controls somehow.
It's up to you not to add such a feature, but I think it's important to fix issues found in the "core library"
cheers
from freezeframe.js.
An important limitation of this library is that it is not able to actually "pause" a gif on a frame other than the first frame. This is due to browser security in regards to CORS and while not all gifs are hosted on a different domain than your own, it is an important enough use-case for us to keep it simple.
If this limitation is a deal breaker for you, I will probably close the issue. If not, let me know and I can add an autoplay feature that allows for clicking to "pause" gif (albeit on the first frame).
from freezeframe.js.
Thanks for the update! I would need it to pause on the frame they're looking at. It seems yes, you should close this issue, but I hope you put these issues in your documentation or that example page. Maybe say you can't have a GIF auto-start and then pause it. But you can use your great library to play and pause them if one likes. Here's the piece I wrote on creating animated GIFs in Excel, though I pulled back and mostly cover creating stand alone GIFs.
Again, thanks for the library! It may still come in handy for me one day!
from freezeframe.js.
No problem getting back to the first frame in my case. Thanks for the efforts!
from freezeframe.js.
Fair enough, I will add more clarification to the documentation! Maybe at some point if I have time I can create a special version of Freezeframe intended for gifs that you host on your own domain, which would allow for actual frame parsing and pausing on a specific frame.
I've added a ticket to update the docs: https://github.com/ctrl-freaks/freezeframe.js/projects/1#card-47483175
Thanks! Lmk if there's anything else we can do to help.
from freezeframe.js.
Related Issues (20)
- ReactFreezeframe not working with Server-Side Rendering HOT 5
- Is it possible to play the animation a single time (no loop) ? HOT 1
- Is it possible to have the GIF play and then stopped on trigger? HOT 3
- Is something like this even possible? HOT 1
- Problem with Freezeframe.js inside Bootstrap 5 Modal HOT 1
- Size & color of play button
- No callbacks on trigger:'click' HOT 2
- destroy should completely remove all traces of freezeframe.js from DOM
- freezeframe.js should have a method to refresh calculations of DOM element HOT 1
- freezeframe should have a "ready" event listener HOT 1
- Could not find a declaration file for module 'react-freezeframe'
- Please support WebP format
- Project 'angular-freezeframe' does not exist
- Freezframe Gifs are not resizing in react js HOT 1
- Plugin not recognizing img attributes HOT 1
- Unminified Version
- Unminified Release and dismounting method
- Does it really support Typescript? HOT 1
- GIFS resize to be huge HOT 1
- Static image is blurry on high device pixel ratio screens. HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from freezeframe.js.