Jump to content
Search Community

svg, show and hide without transition

benoit test
Moderator Tag

Go to solution Solved by Shaun Gorneau,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

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.
×
×
  • Create New...