Jump to content
GreenSock

benoit

svg, show and hide without transition

Recommended Posts

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

Link to comment
Share on other sites

Hi benoit, you can use set()

 

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

  • Like 2
Link to comment
Share on other sites

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

Link to comment
Share on other sites

Maybe I'm misunderstanding what it is you're trying to accomplish. What is your goal?

  • Like 2
Link to comment
Share on other sites

Hello benoit, and Welcome to the GreenSock Forum!

 

If you could please give more information on what your end goal or animation effect you what to achieve so we can better help you!

 

If you are just setting a property than you should use the set() method like Shaun advised, instead of using a zero based tween.

 

But additional info would be appreciated!

 

Thanks! :)

  • Like 2
Link to comment
Share on other sites

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
Link to comment
Share on other sites

Thanks for the code snippet but i am still confused on what type of effect you want?

 

Based on your code above your using a to() tween as a zero based tween, to set autoAlpha. But zero based tweens run immediately so im not sure what you want since your setting your tween to show and then 1 sec later, hiding it.  So I'm not sure why you would need a timeline for tween that are not interpolating your elements. Its like you just want to turn on and off the display of your elements.

 

This can be done with less code but Im confused on what type of effect your trying to achieve, since it would be better to just use the set() method instead of a zero based tween. Are you trying to do a flicker effect? Again some type of description of the effect your trying to do would be helpful in us helping you.

  • Like 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

 

You can add a method to TimelineLite/Max like this.

TimelineLite.prototype.showBetween = function(target, start, end) {
  
  this.set(target, { autoAlpha: 1 }, start);
  this.set(target, { autoAlpha: 0 }, end);
  return this;
};

See the Pen 53aef6f26da4854b1ca715c94af0b486?editors=001 by osublake (@osublake) on CodePen

  • Like 4
Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×