Search code examples
javascriptgsap

altering gsap timeline position parameter dynamically

I have several gsap timelines that start at different times.

in my setting it is nescessary to use the position parameter for the timelines for sequencing. delay() is unfortunately not possible.

here is some sample code:

sampleTimeline= new TimelineMax({paused: true,onComplete:restartSampleTimeline},0)
.to("#sampleblock",2,{x:"200px"},2) /* <-- this parameter needs to be dynamic */
.to("#sampleblock",2,{x:"0px"},4);

var count = 0;

function restartSampleTimeline(){
  $("#sampleblock").html(count);
  count++;
  if(count>=1){
     // at this position, i want to skip the two seconds / change the number "2"! 
     sampleTimeline.restart();
    }else{ 
     sampleTimeline.restart();
  }
}

sampleTimeline.play();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TimelineMax.min.js"></script>
<div id="sampleblock">haha</div>

what i want to achieve is to (as you can see in my comment in the javascript section) alter the position parameter of the first to() after a specific condition (in this case var count >=1)

is there any way to do this? i was not able to "just use a variable as position parameter", because it only remembers the first state of the given variable...

thanks in advance :)

Solution

  • okay, so i came to a conclusion!

    i found out, that there are two possible ways to achieve, what i wanted. for me, only the first one works... the second one is not possible in my setting...

    ######## 1st Solution ########

    in my case, i wanted to skip thw first tween delay... so what i did, was to change the second tween to "+=0" so that it always starts imediately after the tween before and let the first tween, how it was...

    the thing i changed was if(count>=1) to restart the timeline and seek the wished position.... so my final result ist the following:

    sampleTimeline= new TimelineMax({paused: true,onComplete:restartSampleTimeline},0)
.to("#sampleblock",2,{x:"200px"},2)
.to("#sampleblock",2,{x:"0px"},"+=0");

var count = 0;

function restartSampleTimeline(){
  $("#sampleblock").html(count);
  count++;
  if(count>=1){
     sampleTimeline.restart();
     sampleTimeline.seek(2);
    }else{ 
     sampleTimeline.restart();
  }
}

sampleTimeline.play();
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TimelineMax.min.js"></script>
<div id="sampleblock">haha</div>

    ######## 2nd Solution ########

    unfortunately, that solution did not work in my case but for future reference, there is a posibility, to change the value dynamically... you can use a function as parameter... but as i already said in the comments, that function gets only called one initial time... so what you can do, is to regenerate the timeline...

    the following is a example, how to achieve that:

    sampleTimeline= new TimelineMax({paused: true,onComplete:restartSampleTimeline},0)
.to("#sampleblock",2,{x:"200px"},returnDelay("first"))
.to("#sampleblock",2,{x:"0px"},"+=0");

var count = 0;

function restartSampleTimeline(){
  $("#sampleblock").html(count);
  count++;
  if(count>=1){
     sampleTimeline.clear();
     sampleTimeline
     .to("#sampleblock",2,{x:"200px"},returnDelay("not-first"))
     .to("#sampleblock",2,{x:"0px"},"+=0");
    sampleTimeline.play();
    }else{ 
     sampleTimeline.restart();
  }
}

sampleTimeline.play();

function returnDelay(i){
  if(i=="first"){
    return 2;
  }
  if(i!="first"){
    return 0;
  }
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TimelineMax.min.js"></script>
<div id="sampleblock">haha</div>

    i hope, that helps some people with a similar problem in the future :)