autoAlpha logic help

[martis]

Hey guys,

 

I am building an experience where I am fading on many large images, one on top of the other.

 

I am creating a timeline that will have to play both forwards and backwards.

 

I want to optimize performance by only displaying the image that is currently visible, and the image that is fading over it. Once the image fades over it, I want to hide the image that it faded over.

 

Anyone have ideas on how to best approach this where I don't have to manually set the image that it faded over to autoAlpha:0 after every fade?

 

Thanks!

[Carl]

Hmm, it would help to see some actual code to better understand how things are currently set up.

A CodePen demo would help, maybe just use 4 or 5 colored divs. Here's how to create a CodePen demo: http://forums.greensock.com/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

I would think that if you are doing this to many images, you could create a loop that inserts tweens for each element into a timeline. Taking this approach it should only really be 1 line of code that handles setting the autoAlpha to 0 of the image underneath the element that just faded in..

[Jonathan]

In addition to the Mighty Carl's advice.. here is a simple GSAP image slider:

 

See the Pen qxsfc by jonathan (@jonathan) on CodePen

 

It might give you some ideas, or not... but a codepen example would help alot!