Summarize gsap timelines

[iamsebastn]

hey there, My question is, if (for sure) there's a way to summarize timelines? So like in this example , all animations are going to expand over nearly 70 lines of code. Now my question is, if there's any possibility to reduce the amount of lines needed? Or better to collect them together? 🧐

Thank you all in advance!🫶

[GreenSock]

Hi @iamsebastn. I'm not quite sure what you're asking. Do you want us to analyze your code and tell you if you can shorten it somehow? It seemed mostly fine to me, although this was a little wasteful: 

stagger: {
  from: 0,
  axis: "x",
  amount: 0.25
}

It's not as if you've got a grid of targets, so you probably don't need the axis: "x", and the from is 0 by default so that's unnecessary as well. It could be simply: 

stagger: {
  amount: 0.25
}

 

2 hours ago, iamsebastn said:

Or better to collect them together?

Collect what together? 

[iamsebastn]

Hey thanks! Yep, this nearly saved 10 lines of code haha. 
 

2 hours ago, GreenSock said:

Collect what together? 

The amount of the lines used to get this code running seemed a little bit to much IMO. So I thought if it would be possible to reduce the amount of used lines. Maybe per grouping timelines together and so on. 

[GreenSock]

Yeah, if you just want to chop down your code, you could leverage timeline defaults and selector text: 

const durationOut = 1;

let tl = gsap.timeline({
  defaults: {
    ease: "power3.inOut",
    duration: 1.25,
    stagger: {amount: 0.2}
  }
});

tl.fromTo(".plus", {
    xPercent: -125,
    rotate: -45
  }, {
    xPercent: 0,
    rotate: 0
  }
);
tl.fromTo(".text", {
    xPercent: -125
  }, {
    xPercent: 0,
    stagger: { amount: 0.25 }
  }, "<");
tl.to(".line", {
    width: "100%",
    ease: "circ.inOut"
  }, "<");
// end loading
tl.to(".plus", {
    rotate: 45,
    xPercent: 100
  }, "> -.25");
tl.to(".text", {
    xPercent: 100,
    duration: durationOut,
  }, "<");
tl.to(".line", {
    scaleX: 0,
    transformOrigin: "right center",
    duration: durationOut,
    ease: "circ.inOut",
    stagger: null
  }, "<");