scrollTrigger animation happening too fast and I don't know how to delay it

[dagda1]

You need to scroll right to the end to see the problem.  I tried creating a codepen with just the last section but it seemed to work well on its own but in the more complex example like the codepen in this post, the scrollTrigger animation happens way to quickly.

What I want to happen is:

 

1.  An image splits in half and moves to the side of the page (I've used divs in this example).

2.  I would like a delay to happen before the 2 elements at the side of the page fade out and another div fades in slowly.

I have it working the way I want,  the problem is, it all happens to fast.

I would like a delay between each of the `.to` and `.fromTo` pieces of the timeline but I don't know how to do that.  Should I have a separate timeline for each one?

 

    let tl = gsap
      .timeline({
        scrollTrigger: {
          trigger: ".breaking",
          start: "center 65%",
          end: "center 51%",
          scrub: 1
        }
      })
      .to(".breaking", { justifyContent: "space-between", ease: "none" })
      .to(".breaking .glass", { autoAlpha: 0, ease: "none" })
      .fromTo(
        ".services",
        { opacity: 0, ease: "none" },
        { opacity: 1, ease: "none" }
      );

 

See the Pen NWOaEGX by dagda1 (@dagda1) on CodePen

[mvaneijgen]

Hi @dagda1

 

11 hours ago, dagda1 said:

Should I have a separate timeline for each one?

 

No you always never need more than one ScrollTrigger to get the desired effect. There are multiple ways to extend a timeline on ScrollTrigger. 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 if you want to increase your animations duration, you'll have to increase the scroll distance. Take a look at this video which is really good for demonstrating the issue most people have when starting with ScrollTrigger 

 

 

I've also add an empty tween to your timeline between the .to and .fromTo which does nothing for 2 seconds, this could also help when you want nothing to happen for x amount of seconds. Hope it helps and happy tweening! 

 

See the Pen VwVPKZz?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[dagda1]

THank you for the reply @mvaneijgen and I hate to mention this but the opacity animations are not happening now.  Do you know why that would be?

One other problem I have is that I am really confused by the `start` and `end` properties of scrollTrigger.  I end up just vaguely guessing.  

[dagda1]

setting the `scrub` to a numeric value greater than 1 seems to help my cause.

[mvaneijgen]

Yep, you just have to use it for a while to get the hang of it. 

 

My go to is start: "top top" and end: "bottom top", as you can see each property has two values. the first value has to do with the element you're targeting and the second has to do with the view port, so if you translate start: "top top" to English it will be: when the top of the element hits the top of the view port start. 

 

My advice would be use the named properties top, center, bottom and add or subtract pixel values from those with -= or +=. If you have markers: true, you can see what the labels are doing. 

 

2 minutes ago, dagda1 said:

setting the `scrub` to a numeric value greater than 1 seems to help my cause.

 

What this does is lag all animations that amount of seconds behind the scroll. It can be a really nice effect, but don't in crease it to much or it will feel laggy for the user. Happy tweening!