Jump to content


Initial Visiblity after restarting timeline

Moderator Tag

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

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?

Link to comment
Share on other sites

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. 




  • Like 1
Link to comment
Share on other sites

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 });


            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);

Link to comment
Share on other sites



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:



Hope this helps,



  • Like 1
Link to comment
Share on other sites

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.




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]

  • Like 1
Link to comment
Share on other sites

Carl, this is the fiddle:



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



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


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}) );




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. 

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.