[timelines in timeline]

4 minutes ago, Cassie said:

This may help too? Another way to grab a timeline after creation

https://greensock.com/docs/v3/GSAP/Timeline/getById()

I will try to remember this ><

[timelines in timeline]

Is there a  better way to make this, without "tl.call()" ?

[timelines in timeline]

OK, I will make an array of TL

 

[timelines in timeline]

Codepen updated with comments and result under the line…

 

[timelines in timeline]

The final sub timeline will be more complexe (like Morph), but for now with  the same mouvement and the same seek, positions are different.

[timelines in timeline]

Hi,

 

I think I do it this wrong… and it's not like expected 😕

 

 

See the Pen jOeVoaO by benoitwimart (@benoitwimart) on CodePen

[Scale loop and Math.sin()]

Wow

[Scale loop and Math.sin()]

Hi,

 

I think I did it but it's not look very smooth…

Any tricks to do it better ?

See the Pen eYLoyzB?editors=1111 by benoitwimart (@benoitwimart) on CodePen

[HSL tween]

Hi,

How can I deal with HSL tween, after RGBtoHSL I have a tween between RGB…
I make an array of my colors to fixe this, but may be there something better?

 

 

See the Pen LYByBKK by benoitwimart (@benoitwimart) on CodePen

[drawSVG and Pixi]

May be I need to make an await function to deal with my slow svg to texture

[drawSVG and Pixi]

See the Pen JjBXXrd?editors=1111 by benoitwimart (@benoitwimart) on CodePen

 

If I understand how to deal with all ticks, I try an onUpdate on the `gsap.to()` it's not work. I can change the FPS, to view something ^^'
 

[drawSVG and Pixi]

Hi,

Is there another way to do this ?
I think ```updateBoule``` is slow and ugly 

See the Pen LYBGgLN by benoitwimart (@benoitwimart) on CodePen

[scrollTriger and pin]

Thank You @akapowl !

[scrollTriger and pin]

My best test :

See the Pen zYPeMBa by benoitwimart (@benoitwimart) on CodePen

[scrollTriger and pin]

Hi,

I don't understand how to pin two elements or if this is possible with scrollTriger.
In my codepen I would like to pin ".main" and remove the white space.

See the Pen GROzdNv by benoitwimart (@benoitwimart) on CodePen

[Sound and Timeline]

YES!

[Sound and Timeline]

OK I found my error !
```repeat:1```  is 1 time + 1 repeat

See the Pen JjOYWRB?editors=1010 by benoitwimart (@benoitwimart) on CodePen

[Sound and Timeline]

I made another pen with tl.play (left and yellow bar) VS tick (right and blue bar)…
tick version is faster (maybe timeScale + progress need a tricks) ?

See the Pen JjOYbYg by benoitwimart (@benoitwimart) on CodePen

[Sound and Timeline]

Hi,

I try to make my own player with timeline and sound butI don't know what's wrong in my codepen.

Read the sound, is good in synch but seek and pause fail.

In my case, I change the timeScale to make it easy to "snap" with half-note and use "progress" to "seek".

The yellow circle is the open hit hat and is not good when I "seek" or "pause" the sound.
Any idea, any similar tools (with sound, I know GSDEVtools) ?

See the Pen MWOwRYo by benoitwimart (@benoitwimart) on CodePen

[PixiJS + GSAP + PHP + FFMPEG !]

JS version is online :
https://www.opacoise.fr/opac2022/
 

[PixiJS + GSAP + PHP + FFMPEG !]

@OSUblake thank you great PixiJS + GSAP master

[PixiJS + GSAP + PHP + FFMPEG !]

Hello,

No question, just GSAP fanboy

 

I've just finish this project :
- Animation with GSAP and PixiJS (from SVG to json and sprite + PNG)
- Export in png with PHP
- And mp4 made with FFMPEG
(sound is made with Ableton)
 

 

 

[SVG path stringToRawPath and rawPathToString (MotionPathPlugin)]

function isNum(n) { return !isNaN(parseFloat(n)) && !isNaN(n - 0) }

let  d= "M23,80.5 C48,64.83333 73,49.16667 98,33.5 80.16667,28.5 62.33333,23.5 44.5,18.5 53.16667,49.16667 61.83333,79.83333 70.5,110.5 ";

d = d.trim().replaceAll(/([A-Z])+/ig, "$1 ");
d = d.replaceAll(/,/ig, " ");

d = d.split(' ')

let format = {"C":7,"M":3,"L":3,"V":2,"H":2,"Q":5,"Z":0};


d.forEach((e,i) => {
  if(!isNum(e)){
      if(isNum(d[i+format[e]])) d.splice(i+format[e], 0, e);
  }
});

Pretty Ugly

[SVG path stringToRawPath and rawPathToString (MotionPathPlugin)]

Thank you @Cassie (I looked at your site last night and now you are answering my question )
I work with SVG and opentypeJS, so I need to format my path.
So I will make a split regex replace swip wizzz function to deal with this.

[SVG path stringToRawPath and rawPathToString (MotionPathPlugin)]

Hi,

SVG/GSAP question
Why the end of the d value is like this ?
The "C curveTo " have 18 arguments  for 6 (C x1 y1, x2 y2, x y) ?
Anyway to "normalize" this? 

See the Pen YzrXGpL?editors=1111 by benoitwimart (@benoitwimart) on CodePen