Initial Visiblity after restarting timeline

[MaryJoS]

How should one restart but not play when the initial objects are all set to visibility is hidden?

 

When my timeline plays the first round, the initial visibility (set in css class) for my divs start hidden.

 

A few seconds in they fade in with autoAlpha and then few seconds later fade out with autoAlpha.  At the end of the timeline, the timeline is reset.  When I click a button to play again, the divs are visible intitially...

 

How should the divs be set in the first place?

[Chrysto]

Hi and welcome to forums,

 

You can use a zero-duration tween to set the elements autoAlpha to 0 on the beginning on the timeline, or to use TweenLite.to() method, or TweenMax.fromTo()  method. 

 

 

http://jsfiddle.net/YkVwk/3/

[MaryJoS]

I've tried fromTo and set to start the autoAlpha to 0.   It works on the first time the timeline runs, but the play after a restart().pause() sets the divs' visibility to visible.

 

See code below to initialize the timeline.

     var timeline = new TimelineLite({ paused: true,delay:0.5 });

            timeline.duration(jQuery("#audioplayer").data("jPlayer").duration);


            jQuery.each(divAF.data('json'), function (index, value) {
                var o = jQuery('#' + value.id);


            
                var beginningState = { autoAlpha: 0 };
                if ((value.timeIn == "-1" || value.timeIn == "0") && (value.animateIn == -1)) {
                    beginningState["autoAlpha"] = 1;
                }
                
                if ((value.x != '-1') || (value.y != '-1')) {
                    var x = (value.x != '-1') ? parseInt(value.x) : 0;
                    var y = (value.y != '-1') ? parseInt(value.y) : 0;
                    beginningState["position"] = "absolute";
                    beginningState["left"] = x;
                    beginningState["top"] = y;
                } else {
                    beginningState["position"] = "relative";
                }
                if (value.z != '-1') {
                    beginningState["z-index"] = parseInt(value.z);
                }

                if (value.width != '-1') {
                    beginningState["width"] = parseInt(value.width);
                }
                if (value.height != '-1') {
                    beginningState["height"] = parseInt(value.height);
                }

                timeline.add(TweenLite.set(o, beginningState));

                
                if (value.animateIn != -1 && value.timeIn != "-1") {
                    timeline.add(TweenLite.to(o, 1,  { autoAlpha: 1 }), parseInt(value.timeIn)+1);
                }

                if (value.animateOut != -1 && value.timeOut != "-1") {
                    timeline.add(TweenLite.to(o, 1,  { autoAlpha: 0 }), parseInt(value.timeOut)+1);
                }


            });

[Rodrigo]

Hi,

 

Maybe you could try taking the TweenLite.set instances outside the timeline. You could create a JQuery object that contains all your elements and pass that to the constructor or strip the timeline.add and just use TweenLite.set, like this:

//Changes this
timeline.add(TweenLite.set(o, beginningState));

//To this
TweenLite.set(o, beginningState);

Zero duration tweens are a bit tricky when used in timelines, but for setting the initial state of CSS properties are great, you can read a great explanation by Jack in the following post:

http://forums.greensock.com/topic/7671-zero-duration-visibility-tween-on-a-timelineme/#entry29172

 

Hope this helps,

Cheers,

Rodrigo.

[Carl]

In addition to what the other's have suggested, it would be very helpful to provide a very simple example of the unexpected behavior you are experiencing.

 

Its very difficult for us to assess everything that is happening with all the conditions and dynamic property setting you have in place. Its possible you could be creating tweens that overlap and thus overwrite each other. Again, hard to know for sure with so much code that is not easy for a first-time viewer to digest. 

 

I created a very simple timeline here that starts an object with autoAlpha:0, fades in to autoAlpha:1. Upon restart().pause() the element is not visible as expected.

 

http://codepen.io/GreenSock/pen/26c49bd16d52e3f517e58bcc5be51e9f

 

Feel free to fork that demo and edit it in a way that it replicates the behavior you are getting in as simple a manner as you can. 

 

We'd love to help you work through whatever issues you may be having.

 

[Edit] I failed to look at bassta's fiddle which does the same thing as my example before posting [/edit]

[Chrysto]

Carl, this is the fiddle:

 

HTML

<div id="restart">Restart</div><div class="box"></div>

CSS

 

.box{    position: relative;
    width: 100px;
    height: 100px;
    background: black; 
}

JS

var t = new TimelineMax();
var $box = $(".box");


t.add( TweenLite.to($box, 0, {autoAlpha:0}) );  //or set(), fromTo() methods. Add this just to hide the elements on the beginning. 
t.add( TweenLite.to($box, 1, {autoAlpha:1, delay:1}) );
t.add( TweenLite.to($box, 1, {autoAlpha:0, delay:2}) );


t.play();


$("#restart").click(function(){
    t.restart();
});

 

I personally like to create a reset() function and call it at the end of the timeline and haven't  got problems such as this.