Let animation in scroll trigger timeline run in the background

[Garavani]

Hello all,

 

hopefully this can be answered without a code pen as it is (I guess) a quite simple and generic question.

 

I have the following scrollTigger timeline:

 

const image2 = gsap
  .timeline({
    scrollTrigger: {
      trigger: "#image-2",
      pin: true,
      scrub: true
    }
  })
  .to(".top-color", {
    "--r": 73,
    "--g": 57,
    "--b": 51,
    "--a": 0.77
  }, 0)
  .to("#image-2 .dimmer", {
    "--gradient-middle": "25%"
  }, 0.5)
  .to("#image-2 .dimmer", {
    "--gradient-alpha": 0
  }, 1)

 

which works well. Animations expanding while the #image-2 is in view.

They should run from 0 to 100% of the timeline.

 

Now when I want to add other animations as the ones in italic:

 

const image2 = gsap
  .timeline({
    scrollTrigger: {
      trigger: "#image-2",
      pin: true,
      scrub: true
    }
  })
  .to(".top-color", {
    "--r": 73,
    "--g": 57,
    "--b": 51,
    "--a": 0.77
  }, 0)
  .to("#image-2 .dimmer", {
    "--gradient-middle": "25%"
  }, 0.5)
  .to("#image-2 .dimmer", {
    "--gradient-alpha": 0
  }, 1)
  .to("#detail-image-1", {
    y: "50vh"
  }, 0.5)
  .to("#detail-image-2", {
    y: "-30vh"
  }, 0.5);

 

The new ones work as expected, too. Only that they steal seemingly the time the first ones had to roll out completely. How can I avoid this?

The first ones should always work, let’s say “in background” while the other ones above an be added without interfering and not shortening the times.

 

Many thanks in advance!

[mvaneijgen]

Are you sure you're using the position parameter correctly? They way you've set it up right now is that each tween starts at a fixed second value and some tweens are later in the timeline but start before previous tweens (this isn't bad, but if it's not what you want it will not look right). With "-=0.5" you can have a animation start 0.5 seconds before the previous tween ends and with "+=0.5" you can have a tween start 0.5 seconds after the previous tween ends.

 

See below:

 .to("#image-2 .dimmer", {
    "--gradient-alpha": 0
  }, 1) // Starts at 1 second of the timeline 
  .to("#detail-image-1", {
    y: "50vh"
  }, 0.5) // Starts at 0.5 of the time line that is before the previous tween
  .to("#detail-image-2", {
    y: "-30vh"
  }, 0.5); // same a this one.

A minimal demo is in my eyes always necessary, I could probably point you to the solution in an instant if I can see the code in action. Right now it is guessing of what I think the code should do. I would also recommend setting up a start and end in the ScrollTrigger and enable markers: true to see what your ScrollTriggers are doing and if they are where you think they are. 

 

Hope it helps and happy tweening! Otherwise please post a minimal demo.

[Garavani]

Hi! 

 

First of all, thanks for your super quick response and also the helpful notations! 

Second, sorry for the missing CodePen. Promise that the next question will have one!

Third, actually, after a while I saw that my impression of a first animation with less time at disposition was an impression based on my confusion in understanding the meaning of time (as you say: “1 second” i.g) when having a scrollTrigger timeline (and, in addition with pinned section). As there is actually no time “passing by” but user scroll distance, at least for my feeling.

 

When I started one of the later animations after “1” let’s say at “1.5” the whole animation (or better the scroll) took longer, so the first one seemed faster.

So, yes, all was meant as it actually is. Even if it would have been sure better for understanding ordering the timeline chronologically. (But as I understand it, it is not really relevant for the flow of animations, as the starting times are absolute.)

 

However I am still experimenting and having kind of a hard time to deeper understand the concept of “time” on a scrollTrigger animation.

As said, what is 1 second? What part of the scroll distance does it cover in reality? and so on…

 

Anyhow, great software, great support, thanks very much!

 

Best,

Stefan

[mvaneijgen]

Indeed it is a bit weird to wrap your head around. Normally in GSAP things work based on durations, but with ScrollTrigger that all gets thrown out the window (not really it still matters if you have multiple animations), but in ScrollTrigger the whole animation gets played over the scroll distance you've set. 

 

So lets say we have 10 tweens all of 1 second and we have a ScrollTrigger that animates over 1000px then every animations would take 100px to animate. 1000 / 10 = 100 or 10% of the total scroll duration. When working with ScrollTrigger I usually use logical numbers, so that converting them to ScrollTrigger is easier to grasp. By default tweens in GSAP are 0.5 seconds, just FYI.

 

Hope it helps!

[Garavani]

Hahaha, even more weird now. But I will get closer step by step! Thanks!

 

 

[Garavani]

However, one could say as an essence of your descriptions: the more animations we have in one scrollTrigger timeline (with default duration 0.5 or whatever) the faster they will animate as they “share” the total amount of “time” (which really isn’t time in seconds) given by the distance of the trigger element.

 

So my first impression wasn’t wrong indeed. Could result complicated doing some reliable math here.

 

Isn’t here something that could say: the tween of element X has to cover XX% of the distance while other animations remain untouched?

And, respectively start at XX%…

 

Just wondering…

[mvaneijgen]

3 minutes ago, Garavani said:

Isn’t here something that could say: the tween of element X has to cover XX% of the distance while other animations remain untouched?

 

No but you could set the end trigger to something like end: "3000px" to increase the distance over which the animation gets played. 

 

Take a look at the following video it is a great explanation on how to go about creating GSAP animations with ScrollTrigger 

 

[Garavani]

Sounds interesting! Thank you!

However, in my designs I try to avoid at any cost using pixel measures. Not responsive, is it?

[mvaneijgen]

It's just an example you can make it any value you want. Eg make it a multiple of the current window height end: `${window.innerHeight * 3.5}`. It is all up to you. 

[Garavani]

I think this is a really good way to go! Thanks again!

 

I cannot even imagine how complex all this under the hood is. Really stunning piece of work GSAP!