SVG2GIF icon indicating copy to clipboard operation
SVG2GIF copied to clipboard

Stuck on calculating.

Open GVI02 opened this issue 5 years ago • 7 comments

​ Chris Gannon Hey Chris. Just now i tried to convert a svg animation i made to a gif but the converter appears to be stuck on calculation the start frame. I have a very simple svg of two gears and I want them to spin, nothing more. I made it as such:

var time_line = new TimelineMax({repeat:0,SVG2GIF:true});
time_line.to("#Gear_Teeth_Small", {duration:3,transformOrigin:'50% 50%',rotation: 360} );
time_line.to("#Gear_Teeth_Main", {duration:3,transformOrigin:'50% 50%',rotation: 360} );

When I open the html the animation runs as intended but the converter cant calculate the frames. It just shows "Start Frame: 1 Calculating..."

GVI02 avatar Feb 07 '20 11:02 GVI02

There's a bug in it right now which I need to investigate when I get the time.

chrisgannon avatar Feb 07 '20 11:02 chrisgannon

Ok

GVI02 avatar Feb 07 '20 11:02 GVI02

Hey guys, did this ever get sorted? I have the same problem, it’s throwing an error about TypeError: Undefined is not an object (evaluating ‘B.totalDuration’) SVG2GIF.min.js:251

Line 251 is document.querySelector(".gsap-timeline");k=document.querySelector(".num-workers");v=document.querySelector(".gif-background-color");w=document.querySelector(".num-frames");O=h();B=O[0];Pa.onclick=function(){B.play(0)};timelineFrames=Math.floor(B.totalDuration()/(1/30));timelineFrames=9999999<timelineFrames?'

Set timeline repeat:0':"of "+timelineFrames;w.innerHTML=timelineFrames;R.onclick=ra;ka=Draggable.create(document.querySelector(".uiPanel"),{bounds:window});

steveb85 avatar Jul 07 '21 23:07 steveb85

FYI using gsap 3.0

steveb85 avatar Jul 08 '21 04:07 steveb85

i shortcutted around the frame calculation, but just hacking the .js file and telling it i wanted 60 frames. however it seems that SVG2GF.min.js line 246 is returning [] to the console instead of h

i can get the pop-up to show, and it shows 1/60 frames, however i can’t select the correct class or process anything, so hopefully i’m helping, but not sure if i am or not. here is line 246 with the console return.

.3,{width:0,height:0})};this.makeFrame=function(){B=k*q;if(k>=y){makeFrame=null;if(1<w){var h=n.frames.slice(0,w),v=n.frames.slice(w);console.log(h.length,v.length);h=v.concat(h);n.frames=h}n.render()}else u.seek(B,!1),html2canvas(z,{background:f.backgroundColor,allowTaint:!0}).then(function(f){n.addFrame(f,{copy:!0,delay:A});k++;F.makeFrame()})}}function h(){for(var f=TweenLite.to({},.1,{}).timeline._first,h=[];f;)f.getChildren&&(h.push(f),f.progress(.999),f.pause()),f=f._next;console.log(h);return h}

steveb85 avatar Jul 08 '21 04:07 steveb85

This uses GSAP 2.x and was broken a while ago. Adding GSAP 3 to the mix will just compound the issue(s).

As I don't have the time to look into this, I have added the unminified JS to the branch. Should make it easier to track down the issue.

chrisgannon avatar Jul 08 '21 09:07 chrisgannon

Any update? It was a cool tool

apoleo88 avatar Apr 18 '23 12:04 apoleo88