Jump to content


  • Posts

  • Joined

  • Last visited

Everything posted by dazzafact

  1. 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()
  2. 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
  3. 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)
  4. here's an quick idea how it might work with Canvas using GSAP+PixiJs https://codepen.io/dazzafact/pen/eYyroYw?editors=1111
  5. 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')
  6. 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
  7. 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 })
  8. 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
  9. Thanks, but how you simulate the reverse thing with just Labeling? Cant understand your example. ...in my case i use two Tweens (foward,backward).
  10. 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')
  11. 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
  12. 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
  13. 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 },'>')
  14. Loving your GSAP Plugin! one of my top 10 Javascript Libraries 💛💛💛
  15. 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😅
  16. Hello There!, Is it possible to get the current Time in Seconds of all timelines already set? $tl.fromTo($slide,{alpha:0},{alpha:1,duration:1},0) .to($slide,{duration:3},'>') .to($slide,{alpha:0,duration:1},'>'); $time=$tl.currentTime()//1+3+1=4 alert($time)//4
  17. this is almost done with CSS... nothing really to do with GSAP.
  18. Sadly,... but i just find a quick Solution to write it once : $tl.to($slides,{ onUpdate:function(blur1){ blur1.blur+=0.1}, onUpdateParams: [ $blurFilter1 ],duration:imageTimes+fade, pixi: {.... } },'>') Thank you, anyway
  19. Yes, you are right, this works! 🤍 But i thought i could write it at once, not twice $tl.to([$slides,$blurFilter1],{duration:5 },'>') // :-/ doesnt work $tl.to($slides,{duration:5, },'>') //only seperate $tl.to($blurFilter1,{duration:5, },'>')
  20. Hello, iam using PixiJs Filters . Now i want to combine it with Event "onUpdate" Is it possible to change a the variable Blur while run through Event? (this example below does'nt really work. It's just an example of what I was roughly imagining. $tl =gsap.timeline({}) $blurFilter1 = new PIXI.filters.BlurFilter(); $slides.filters=$blurFilter1 $blurFilter1.blur=0 $tl.to($slides,{duration:5, onUpdate:function(){ var blur1= gsap.getProperty(this.targets()[0], "blur") blur1 +=0.01 gsap.set(this, {pixi:{filters:{blur:blur1}}}); } },'>')
  21. Ok, here's my Solution if you use PixiJs $tl =gsap.timeline() $anchorX=0.8 //your x image point to zoom $anchorY=0.2 //your y image point to zoom $pointX=$canvasWidth*$anchorX;//image size width $pointY=$canvasHeight*$anchorY;//image size height $slides.anchor.set($anchorX,$anchorY);//only for Pixi $tl.fromTo($slides,{x:$pointX,y$pointY},{duration:1},0)//set image position on begin relative to Scale values (.to()) .to($slides,{duration:12, pixi: {scaleX :2,scaleY 2 } },'>')
  22. Thank you all for reply. Yes, iam using PixiJs (no HTML) I think Gasp Parameters are not the first adress. I have to try first with Pixijs Parameters to find a Solution
  23. Yes thanks, this works, but only in CodePen. When i try this parameter "transformOrigin" in my Project it won't work. It animates the same, like i posted first- to the center $tl.fromTo($slides, {alpha:0},{alpha:1,duration:2},0) .to($slides,{duration:10,transformOrigin:"80% 10%", pixi: { width: $slides.width*(1.2), height: $slides.height*(1.2) } },'>')