[GSAP Text Animation with Canvas]

On 4/9/2022 at 3:15 PM, Cassie said:

You won't get the same quality though, this is progressing the timeline frame by frame, taking snapshots and then stitching them together.

 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()

 

[GSAP Text Animation with Canvas]

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

[GSAP Text Animation with Canvas]

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)

See the Pen eYyroYw?editors=1111 by dazzafact (@dazzafact) on CodePen

[Which Canvas Library i should be using for GSAP text animation?]

here's  an quick idea how it might work with Canvas using GSAP+PixiJs
 

See the Pen eYyroYw?editors=1111 by dazzafact (@dazzafact) on CodePen

[Get Time of Tween by Label]

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')

 

[Get Time of Tween by Label]

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()?

 

See the Pen xxpxVBe by dazzafact (@dazzafact) on CodePen

[Get Time of Tween by Label]

 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
}) 

 

[Get Time of Tween by Label]

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 

 

See the Pen rNpBqGr by dazzafact (@dazzafact) on CodePen

[How to reset Reverse() ?]

57 minutes ago, mikel said:

Hey @dazzafact,

 

There are many ways to re-use a complex timeline:
.play() and a position parameter,
.play() and a label positioned where you want
or tween this timeline with many options
...

 

 

 

 

The world is colorful ...

Mikel

 

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

[how do I reset or reverse a tween?]

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')

 

[How to reset Reverse() ?]

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')

See the Pen MWOMvdX by dazzafact (@dazzafact) on CodePen

[How to reset Reverse() ?]

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

[How to reset Reverse() ?]

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
},'>')

 

 

[get Duration of current TimelineSet]

1 minute ago, GreenSock said:

Sure. 

$time = $tl.duration(); // without the timeline's repeats
$time = $tl.totalDuration(); // with the timeline's repeats (if any)

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

[get Duration of current TimelineSet]

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😅

[get Duration of current TimelineSet]

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

 

[PixiJs Filter in onUpdate()]

15 hours ago, OSUblake said:

You really don't need the onUpdateParams as you already have the target.

 

$tl.to($slides,{
  onUpdate:function(){
    $blurFilter1.blur+=0.1},
  ,duration:imageTimes+fade,  pixi: {.... } },'>')

Thanks for this hint, but iam using this code in a loop to create a Slideshow. So there are varoius Blur Instances
I've kept the code slim to give you a better overview
 

for (k in $allSlides){

$slides=$allSlides[k]['slides']
$blurFilter1= new PIXI.filters.BlurFilter($allSlides[k]['filter_options'],..,..);

//...

$tl.to($slides,{
    onUpdate:function(blur1){
    blur1.blur+=0.1},
  onUpdateParams: [ $blurFilter1 ],duration:imageTimes+fade,  pixi: {.... } },'>')

}

 

 

[How to make this responsive?]

this is  almost done with CSS... nothing really to do with GSAP.
 

[PixiJs Filter in onUpdate()]

1 hour ago, OSUblake said:

No, for it to work together like that, everything in the array would need to be similar type of object with the same properties, like all sprites or all filters. 

 

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

[PixiJs Filter in onUpdate()]

 

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,  },'>')

 

[PixiJs Filter in onUpdate()]

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}}});
				   } },'>')

 

[Zoom to a specific image Point]

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 } },'>')
                  

 

[Zoom to a specific image Point]

1 hour ago, OSUblake said:

It's not clear if you are using PixiJS, because your example shows HTML, which doesn't work the same.

 

If you're using HTML, check out the demos by Jack in this thread.

 

I already tried the example you post ^ , but this seems to be made for HTML-Eleemts not PixiObjects. I thought Html Params and PixiJs-Params where use as the same. So thats why i posted my first example above as a simple HTML Version. Just to make it as short as possible to understand.
Ok, now i see Jack creates an Effect with Plugin. Ok, i will try this next. 
 

 

[Zoom to a specific image Point]

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

[Zoom to a specific image Point]

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) } },'>')