Passing .to animations into a timeline as variables

[PG1]

In this pen I have a timeline. It has 4 '.to' statements, representing two pairs providing different animations where the card on the right moves, then moves back to its starting point. 

As part of a wider project, I'd like to be able to pass in a movement, or one of these pairs, as a variable. What I'm trying looks a little like this:

const variable = ` <-- trying using backticks
.to(".card1", {
  x: "-60px",
  duration: 0.5,
  ease: "power4.inOut"
})
  .to(".card1", {
    x: "0px",
    duration: 1,
    ease: "power2.inOut"
  })`

tl
.variable <-- PASSING THIS IN DOESN'T WORK
.to(".card1", {
    rotation: "-45deg",
    duration: 0.2,
    ease: "power1.inOut"
  })
  .to(".card1", {
    rotation: "360deg",
    duration: 1,
    delay: 0.2,
    ease: "power1.inOut"
  });

I'm sure there's an easy solution here. 

I guess the next question i'll have is how you would pass in these variables conditionally... like can you embed a ternary into the chain?

Thanks!!
 

See the Pen f216578054531e1fcdef26b956520f03 by petegarvin1 (@petegarvin1) on CodePen

[nico fonseca]

Hey @PG1 You can encapsulate timelines in functions and return them. So you can add them to your main timeline in case you need it.

See the Pen dddfbcace3b98e86269a13a95518c709 by nicofonseca (@nicofonseca) on CodePen

Does this help you ? 🙂

 

[GreenSock]

Yes, the technique @nicofonseca mentioned is quite robust and common. And to be clear, you can do what [I think] you were originally attempting too: 

const tween = gsap.to(...);
                      
const tl = gsap.timeline();
tl.add(tween, 1); //adds it at exactly one-second into the timeline

It's very object-oriented and flexible. 👍

[PG1]

Both great answers thanks guys!!!

[PG1]

On 8/26/2021 at 4:27 PM, nico fonseca said:

Hey @PG1 You can encapsulate timelines in functions and return them. So you can add them to your main timeline in case you need it.

 

 

Does this help you ? 🙂

 

 

 

Are you able to pass the delay in as a variable to the function that creates the timelines?

[GreenSock]

7 hours ago, PG1 said:

Are you able to pass the delay in as a variable to the function that creates the timelines?

Sure! 

 

But if you're just trying to space those timelines a bit differently, just use the position parameter - see