Jump to content
Search Community

Easiest Way to Less the code for GSAP?

WarenGonzaga

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

WarenGonzaga
Posted

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!

  • Solution
Posted

If it looks repetitive, try to figure out a pattern. 

for (var i = 1; i <= 3; i++) {
  tl.to("#txt" + i, aveDur, { alpha: 1 })
    .to("#txt" + i, aveDur, { alpha: 0 }, 1);
}
  • Like 5
WarenGonzaga
Posted

Thanks for the effort dude! 

Posted

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

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...