Jump to content
Search Community

Easiest Way to Less the code for GSAP?

WarenGonzaga test
Moderator Tag

Go to solution Solved by OSUblake,

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

Is there any way to less this code?
 

var tl = new TimelineMax({delay: 1}),
    visible = 1,
    hidden = 0,
    aveDur = 1;
	
	tl.to("#txt1", aveDur, {alpha: visible})
	  .to("#txt1", aveDur, {alpha: hidden, delay: 1})
	  .to("#txt2", aveDur, {alpha: visible})
	  .to("#txt2", aveDur, {alpha: hidden, delay: 1})
	  .to("#txt3", aveDur, {alpha: visible})
	  .to("#txt3", aveDur, {alpha: hidden, delay: 1})

Any suggestions are welcome!

Link to comment
Share on other sites

another approach is to use a repeating staggerFrom()

var duration = 0.5;
var tl = new TimelineMax({repeat:-1});
tl.staggerFrom(".box", duration, {opacity:0, repeat:1, yoyo:true}, duration*2);

http://codepen.io/GreenSock/pen/mAqyWp?editors=0010

 

Note: this assumes each element has the same class. Since you were targeting unique IDs Blake needed to use a loop to generate those IDs

  • Like 3
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...