[SVG and font in Chrome]

Hi,

 

This is more a question about SVG, Illustrator and Chrome but I think there is a SVG expert in this room.

There is few options to embed font in SVG with Ai (check my codepen), SVG is now with a lot of <glyph> tags but it's not render in Chrome (just in quickview on mac).

So, how to embed font to use with GSAP and get best animation ;  vectorize a big paragraph ? or just put in @font-face style is ok ? what's your workflow ?

 

 

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

[progress slider show/hide problem]

Hi,

 

I extract a part of an animation in the Codepen.

If you read the animation (drag to the right) it's OK, but when you drag to the left, the element is visible.
Why ? Is it a bug or a feature ?

See the Pen pgmJeL by anon (@anon) on CodePen

[svg, show and hide without transition]

I was just going to write the same thing!

TimelineMax.prototype.show = function(e,start,stop){
  //alert(this.duration());
  this.to(e,0,{autoAlpha:1},start);
  this.to(e,0,{autoAlpha:0},stop);
};

It's better with you code and return this !

Thank you OSUblake

[svg, show and hide without transition]

I'm sorry a make a question in the question…

The set() is the answer.

 

My second question is more about prototype, definedProperty (?), maybe open another topic is a better idea.

[svg, show and hide without transition]

I made a long SVG animation, the duration is near 90s. I would like to have less code.

tl.set('svg *', { autoAlpha: 0 }); // start
tl.to('#el' ,0, { autoAlpha: 1 } ,"intro"); // show #el
tl.to('#el' ,0, { autoAlpha: 0 } ,"intro+=1"); // hide #el

tl.to('#el' ,0, { autoAlpha: 1 } ,"part1"); // show #el
tl.to('#el' ,0, { autoAlpha: 0 } ,"part1+=1"); // hide #el

If I can write 2 lines in 1.

tl.set('svg *', { autoAlpha: 0 }); // start
tl.showBetween('#el' ,"intro" ,"intro+=1");  // show for 1s #el

[svg, show and hide without transition]

Thank you Shaun,

From the doc "essentially a zero-duration to() tween with a more intuitive name."

May be I can extend tl with my own function `tl.showBetween(1.2,1.8)`. I will search and go back here

[svg, show and hide without transition]

Hi,

 

GSAP is really impressive, but I'm searching for a tip to playing with visibility or display in svg.

I make a 0s transition but it's look stupid

 tl.to('#el',0,{autoAlpha:0});

In my codepen I try to wink

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

[animation, precision and music]

Thank Carl, I will make a codepen with my experiment.

[animation, precision and music]

Hi,

 

What is the best way to synchronize an GSAP animation and a sound music ?
I make some experiment with

setInterval(function () {
    console.log(audio.currentTime); // will get you a lot more updates.
}, 1000/50);

But what's next ?

var tl = new TimelineLite();
/*
…
*/
tl.progress(audio.currentTime/audio.duration);    

An option like useframes:true looks great but I am not sure to do it right.
If some one could give me some GSAP base to make a good start.

[transform scaled SVG causes blur?]

I have the same problem :

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

SVG looks better with Snap with a `transform="matrix(10,0,0,10,-120.55,-90.85)"`

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

 

Is it possible to do this with GSAP ?