Flashing - alpha problem

[MrT]

Hi,

 

i am attempting to get a basic flash for a button, and an alternative flash for another button but i keep getting glitches if i don't set an alpha value first, it's as if the tween doesn't occur because the alpha value is already at the .to value.

 

See the Pen CAdry by anon (@anon) on CodePen

 

 

var tlA = new TimelineLite({onComplete: function(){ this.restart();}})

var tlB = new TimelineLite({onComplete: function(){ this.restart();}})

 

//TweenLite.set("#redBox",{alpha:1})

tlA.to("#redBox", 1, {delay: 0, alpha:0})

   .to("#redBox", 1, {delay: 0,alpha:1})

 

//TweenLite.set("#blueBox",{alpha:0})

tlB.to("#blueBox", 1, {delay: 0, alpha:1})

   .to("#blueBox", 1, {delay: 0,alpha:0})

 

 

With the 2 tweens commented out blue box will glitch, commented back in the blue box is fine

 

Anyone got any ideas why?

 

Thanks

Sean

[Carl]

Hi and welcome to the GreenSock forums.

 

Yes, if you do NOT set the alpha of the blue box to 0 BEFORE tween to alpha:1, that first tween will be tweening from alpha:1 to alpha:1, which won't really be a tween at all.. at least not visually.

 

If you want to tween to alpha:1, you must first set alpha:0.

 

---

 

One thing to keep in mind is that there will very likely be a delay between the time your page initially renders AND the time your TweenLite.set("#blueBox",{alpha:0}) runs. In your case you may see the blue box at full visibility for a fraction of a second and then it will fade in from opacity:0 to opacity:1. Please note the the term "alpha" is a holdover from ActionScript, the actual CSS property is opacity.

 

In order to avoid this flash that can happen before the set() runs, I recommend that you hide both boxes using the following css:

 

.box {

  width:50px;

  height:50px;

  position:relative;

  margin-bottom:2px;

  visibility:hidden;

}

 

That CSS will be applied immediately as soon as the DOM renders.

 

Later on you can use our autoAlpha plugin in your tweens which very intelligently manages the css visibility state while the opacity is tweening. 

 

So if you have an element with visibility:hidden and you do this tween

TweenLite.from(element, 1, {autoAlpha:0})

 

As soon as the tween begins, the visibility of the element will be set to inherit which will make the element have the same visibility of its parent (which most of the time is visible) and the opacity will tween from 0 to 1.

 

If you tween an element to an autoAlpha:0, the visibility will be set to hidden at the end of the tween.

 

You can read more about autoAlpha in the CSSPlugin docs

 

This is how I would approach the effect you are after and avoid any initial, unwanted flickering:

 

//autoAlpha plugin will automatically set visibility to "inherit" when tween begins (thus making it visible)
//and toggle visibility back to "hidden" when the tween ends.
tlA.to("#redBox", 2, {autoAlpha:0})
   .to("#redBox", 2, {autoAlpha:1})


//autoAlpha plugin will automatically toggle the visibility to inherit when tween begins
tlB.to("#blueBox", 2, {autoAlpha:1})
//autoAlpha plugin will automatically toggle the visibibility to hidden when next tween ends
   .to("#blueBox", 2, {autoAlpha:0})

http://codepen.io/GreenSock/pen/adHry?editors=011

 

notice i put a delay of 2 seconds on each timeline to simulate some unwanted delay in the javascript execution.

[MrT]

Thanks for the reply,

 

i probably should have used  this code :-

 

See the Pen CAdry by anon (@anon) on CodePen

 

 

var tlA = new TimelineLite({onComplete: function(){ this.restart();}})

var tlB = new TimelineLite({onComplete: function(){ this.restart();}})

 

//TweenLite.set("#redBox",{alpha:1})

tlA.set("#redBox", {delay: 0.5,opacity:0})

   .set("#redBox", {delay: 0.5,opacity:1})

 

//TweenLite.set("#blueBox",{alpha:0})

tlB.set("#blueBox", {delay: 0.5,opacity:1})

   .set("#blueBox", {delay: 0.5,opacity:0})

 

 

as i am just turning on and off rather than fading/tweening. In this example the blue box just stays on, i can understand the first .set doing nothing as the alpha is already at 1 but why does the 2nd .set not get processed half a second later and turn the blue box off?

 

Thanks

Sean

[Carl]

but why does the 2nd .set not get processed half a second later?

 

 

I'll answer with 2 similar questions

 

What is the duration of the second set()?

How much time transpires between the second set() and the timeline completing and repeating?

 

See the problem?

 

You aren't allowing any time to actually see the opacity of 1. You set opacity to 1 and then instantly the timeline repeats; setting opacity back to 0.

A solution is to add a dummy tween or set() to the end of the timeline to simply "add time" to the timeline. Typically I would do this using a repeatDelay on a TimelineMax, but on a TimelineLite this is perfectly acceptable

 

var tlA = new TimelineLite({onComplete: function(){ this.restart();}})
var tlB = new TimelineLite({onComplete: function(){ this.restart();
                                                 }})

tlA.set("#redBox", {opacity:0, delay:1})
   //add more time to the timeline with a dummy set 1 second later
   .set({}, {}, "+=1")

tlB.set("#blueBox", {opacity:0})
   .set("#blueBox", {opacity:1, delay:1})
   //add an empty set one second after the end of the timeline
   //empty target, empty vars,
   .set({}, {}, "+=1")

http://codepen.io/GreenSock/pen/LlrJf?editors=001

[MrT]

Hi Carl,

 

i see what you are doing, but this is very specific, the red box and blue box (or sprites/buttons in my app) could be on or off or anywhere in between.

 

I need something that can handle any value from 0-1 for the starting alpha value and still give a consistent flash.

 

Thanks

Sean

[Carl]

Sorry, i don't see what is inconsistent with the last solution.

It can easily support any values between 0 and 1 that you throw at it

 

tlB.set("#blueBox", {opacity:0.3})
   .set("#blueBox", {opacity:0.6}, 1)
   .set({}, {}, "+=1")

 

http://codepen.io/GreenSock/pen/Ieyig?editors=101

[MrT]

Hi Carl,

 

sorry, my mistake, that is now working a treat, thanks for assisting.

 

Thanks

Sean

[Carl]

no problem. glad you got it working.