Looking for a elegant solution: one scrollTrigger for different animations

[Ramate]

Hello!

I would like to have different animations triggered by the same scrollTrigger settings. Most of the animations are added to an Array with a loop, and they work pretty fine.

One of them is not in the array and didn't worked until I created another timeline with the same scrollTrigger settings. So I was wondering if there is another (and more elegant) solution with just one timeline.

Following the code I wrote until now. I could not add a codepen as I don't have an pro account to upload the assets.

Thanks a lot! (:
 

 

let tl = gsap.timeline({
  scrollTrigger: {
    trigger: "#cover",
    start: "top top",
    end: "bottom top",
    pin: true,
    pinSpacing: false,
    scrub: true,
    markers: true,
  },
});

const delayValue = -30;
tl.set(".slices", {opacity: 0, scale: 0.1, delay: delayValue});

const slices = gsap.utils.toArray(".slices");

// SHUFFLE ARRAY
const shuffle = (arr) => {
  for (let i = arr.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [arr[i], arr[j]] = [arr[j], arr[i]];
  }
  return arr;
};

const shuffled = shuffle(slices);

//

slices.forEach((slice) => {
  tl.to(slice, {
    scale: 1,
    opacity: 0.85,
    delay: delayValue,
  }).to(slice, {
    scale: 0.85,
    opacity: 0,
  });
});

// GRADIENT

const gr1 =
  "linear-gradient(90deg, rgba(87, 103, 56, 1) 0%, rgba(204, 128, 97, 1) 20%, rgba(138, 128, 186, 1) 100%)";

const gr2 =
  "linear-gradient(120deg, rgba(138, 128, 186, 1) 0%, rgba(204, 128, 97, 1) 80%, rgba(87, 103, 56, 1) 100%)";

let tl1 = gsap.timeline({
  scrollTrigger: {
    trigger: "#cover",
    start: "top top",
    end: "bottom top",
    pin: true,
    pinSpacing: false,
    scrub: true,
    markers: true,
  },
});

tl1.fromTo(".headline", {backgroundImage: gr1}, {backgroundImage: gr2});

 

[Cassie]

Hi there @Ramate,

 

It's usually pretty difficult to debug from code snippets alone, for future reference there's no need to include assets in the codepen, just coloured boxes are fine!

That said you can add that last animation to the first timeline like this -
 

tl.fromTo(".headline", {backgroundImage: gr1}, {backgroundImage: gr2, duration: 6}, 0);

 

If you want it to last longer, or change the position add a duration and a position parameter.
 

[Ramate]

Hello @Cassie, thanks a lot for your answer. It worked! ((((::::

Funny that I have been trying something similar before, adding the last animation to the first timeline,  but in my attempt I didn't include the duration and position parameter.

So I am now asking myself why the duration would influence the scrollTrigger, as the animation is connected to the scroll distance, and has no defined time in seconds. I am kind of surprised.

Would you give me a glimpse of it?

Thanks again!

[OSUblake]

38 minutes ago, Ramate said:

So I am now asking myself why the duration would influence the scrollTrigger, as the animation is connected to the scroll distance, and has no defined time in seconds.

 

Time matters, you're just not seeing it happen in real-time because it's scrubbing. It's no different than using GSDevTools except that the scroll position is controlling the scrub.

 

See the Pen MEYxBZ by GreenSock (@GreenSock) on CodePen

 

[Ramate]

Thanks for your answer, @OSUblake.

I experimented changing the duration to really small or really big values and now I can see how it influences.

It was kind of hard to determine the right duration, in my case it means that secondary animation should end together with the others. Is there a way to precise it?
 

[Cassie]

If I understand correctly - The secondary animation would need to be the same duration as the total duration of all the other animations added together.

I don't know what your animations look like but I recommend (if possible) removing scrub and just getting the timings right - then adding scrub. ✨