Timeline not seeing new target variable

[tslevack]

Having an issue getting timeline to see new variable.    I have timeline items that are targeted with variables, which works fine with original variable set on page load.  I have onClick function that sets new variable and then plays the timeline.  I even log new variable in console before play command, which shows the new variable.   The timeline plays, but loads the initial variable... not the new one that has been confirmed in console.  

 

Any thoughts why the correct variable is not being used by the timeline?   THANKS!

 

 

<script>

let activePage = ".Mdes";
let nextPage = ".Mcal";
let activeBut = ".desbut";
let nextBut = ".calbut";

let tlD2F = gsap.timeline({
  paused: true,
});

tlD2F.to(activePage, {
  zIndex: 0,
  opacity: 0,
});

tlD2F.to(nextPage, {
  zIndex: 30,
  opacity: 1,
  marginTop: "0vh",
  duration:1,
}, );

tlD2F.to(activeBut, {
  zIndex: 0,
  opacity: 0,
}, 0);

tlD2F.to(nextBut, {
  zIndex: 500,
  opacity: 1,
}, 0);

document.getElementById('D2F').onclick = function(event) {
    tlD2F.pause();
    nextPage = ".Mfea";
    nextBut = ".feabut";;
    console.log("nextPage:", nextPage); 
    console.log("nextButton:", nextBut); 
    tlD2F.play(0); 
};

</script>

[tslevack]

I added a function to log variable just before its called.   On click  sets new variable and logs correctly, then timeline logs correct variable just before being called.   Unfortunately, the next to() line is still loading ".Mcal" instead of ".Mfea".    How is old variable loading??? so confused. LOL

 

let activePage = ".Mdes";
let nextPage = ".Mcal";
let activeBut = ".desbut";
let nextBut = ".calbut";

let tlD2F = gsap.timeline({
  paused: true,
});

tlD2F.to(activePage, {
  zIndex: 0,
  opacity: 0,
  onComplete: function() {
    console.log("Current nextPage:", nextPage);
  }
});

tlD2F.to(nextPage, {
  zIndex: 30,
  opacity: 1,
  marginTop: "0vh",
  duration:1,
}, );

[GreenSock]

Oh, that's just a JavaScript/logic thing. You're misunderstanding how variables work...

let a = "a";
let copy = a;
a = "b";
console.log(copy); // "a"

JavaScript doesn't go backwards and reassign a bunch of references like that. The assignment occurs when that line executes. Period. 

 

If you're trying to animate a new target each time you click, just use a function instead, sorta like this pseudo code... 

let anim;
function transitionPage(activePage, nextPage, activeBut, nextBut) {
  if (anim) { // if there's an old animation, make sure it's killed before creating the new one...
    anim.kill();
  }
  anim = gsap.timeline();
  anim.to(...);
  // ...build your animation...
};

yourButton.addEventListener("click", () => transitionPage(...));

If you're still having trouble, please make sure you provide a minimal demo, like a CodePen, that clearly illustrates the issue so we can take a peek in context. 

 

Good luck!

[tslevack]

Thank you so much for the course correction.  I have the page working exactly I wanted now.  I appreciate your help.

[GreenSock]

Happy to help. ✅