dazzafact

you can do it also smooth in Browser, frame by Frame. Using Client CPU ?. (Not Server) Just use GSAP Seek() to capture each Frame and save all chunks for final MediaCreate (webM,etc) $tl =gsap.timeline({paused:true}); $app = new PIXI.Application({}) $renderx=0 chunks=[] function animate(){ if($renderx>600){return); // Duration $tl.pause() $fps=30 $sec=(1/$fps)*$renderx ||0; $tl.seek($sec); $app.renderer.render($app.stage); chunks.push($app.view.toDataURL("image/webp", 0.50)); $renderx++; window.requestAnimationFrame(function(){ animate() }); ... } var blob = new Blob(chunks) // do something with this blob var vidURL = URL.createObjectURL(blob); var vid = document.createElement('video'); vid.controls = true; vid.src = vidURL; vid.play()

Its not nessesary to use NodeJs to render Videos. You can use Javascript in Browser to do that. for example: new WebMWriter() or MediaRecorder() No installation required

Here's a trick how you Animate Canvas Text (no HTML) using GSAP (+PixiJs) its just an 15-minute- Code Snip. iam sure it can extend for using words and also Lines. The advantages of animations are, that you can convert them to videos in the browser in seconds. (to the Admins: Whould be cool if you can include Canvas Text Animation also to your offical TextSplit Plugin)

here's an quick idea how it might work with Canvas using GSAP+PixiJs https://codepen.io/dazzafact/pen/eYyroYw?editors=1111

Hey, I just extended the methods in GSAP now. But is there a better way without touching the raw source? _proto2.getParamBySec = function getParamBySec(begin,params) { var animations = this.getChildren(1, 1, 1), i = animations.length; while (i--) { if (begin>=animations[i]._start ) { if(typeof(animations[i].vars[params])!="undefined"){ return animations[i].vars[params]; } } } return false }; tl.to('.rectangle', { opacity: 1, imageNum:3, slideNum:1, repeat:0, x: '2', scale:1 },'4'); twe=tl.getParamBySec(4,'slideNum')

Thank you, i tried startTime() like you recommended, but it gives me diffrent values each time (like 0.764). see picture or try Codepen. ? If i want to use getById(), how do I get the starttime ("_start") in the right way (without getting an incorrect value back like you mentioned)? But if I can't access the variable "_start" by using getById(), what else is good for using getById()? https://codepen.io/dazzafact/pen/xxpxVBe

Hey, thanks for your support ? I just saw, that the relative time is also stored in "_start" . OKay, that's exactly what I need ?. Then I have to rewrite my function a bit. It is a pity that this absolute parameter was not made available directly in GSAP ? In my Case: I have many overlapping Slides (like ">1.2") to simulate Transitions. So all new Slides starts with Transitions overlapping (shifted) with the previous Slide. Ok, i think i also have to put an new Key for that in it, to label the Tween tl.to('.rectangle', { duration: 4, opacity: 1, label:'slide34', repeat:0, x: '360', scale:2 })

I'm a bit confused how to set labels correctly. In this example I don't get the start time of the tween (1.second), but the time BEFORE the tween (0 second) How do I get the start time of a tween now? ? tl.add('start') tl.to('.rectangle', { duration: 4, opacity: 1, repeat:0, x: '360', scale:2 },'1') //<--- starts 1 tl.addLabel('ends') r1=getNestedLabelTime(tl,'start') alert(r1);// prints --> 0

Thanks, but how you simulate the reverse thing with just Labeling? Cant understand your example. ...in my case i use two Tweens (foward,backward).

here's a way to simulate reverse with yoyo() in combination with negative "delay". (delay has to be negative to duration) Works for one tween. If you use many other, you have to reOrder the tweens also tl.fromTo('.reverseSim', {opacity:1,scale:2},{ duration: 4, opacity: 1, delay:-4, yoyo:true, repeat:1, scale:1 },'0')

hey, this is very cool. i even found a better solution to simulate reverse, using negative delay with yoyo(): delay:-4 That makes the use of reverse() unnecessary Would be very nice to integrate this as a feature in the next Version of GSAP. For example: "yoyoStartHalf:true" , to simulate a reverse effect.? tl.fromTo('.rectangle', {opacity:1,scale:2,rotate:0},{ duration: 4, opacity: 1, delay:-4, yoyo:true, repeat:1, rotate: '-360', scale:0 },'0') https://codepen.io/dazzafact/pen/MWOMvdX

Now I've made the code a little clearer. As already written, I want to use the "Reverse" method only for 1 tween. But the Reverse() affects all subsequent tweens. I can't stop it with "Resume()". So, you just changed the Paramters in your example (360,-360). That not that problem. I want to keep it dynamic, without touching any Paramters to simulate reverse. In some case you have unknown Paramters, so it has to do the job automaticlly

Hello, I'm wondering how to undo the "Reverse()" method. Or is this intended for the entire gsap instance? i only want to use Reverse() once for one Object. Resume() does not reset "reverse()" tl =gsap.timeline() tl.reverse() tl.fromTo('.rectangle', {opacity:1,scale:2,rotate:0},{ duration: 4, opacity: 1, rotate: '-360', scale:0 },'>') tl.resume() tl.fromTo('.rectangle', {opacity:1,scale:2,rotate:0},{ duration: 4, opacity: 1, rotate: '-360', scale:0 },'>')

Loving your GSAP Plugin! one of my top 10 Javascript Libraries ???

Ok, i found out totalDuration() gives me a current values of any position. THis makes it much easier. Because before i collected all timesstamps manuel in an array?