Second timeline when an animation is done

[JonathanCDev]

Im trying to be able to continue a scrollTrigger when the loop animation is complete. So scrub from 1-300 then an auto animation goes off when it reaches frame 300 which then it goes from 300-450 and once complete user able to scrub from 450-599.

See the Pen BaGMJMy??editors=0111 by JonathanCortez (@JonathanCortez) on CodePen

[Rodrigo]

Hi,

 

The problem here is that the start point of the second ScrollTrigger instance is passed before the end point of the previous one is passed, so basically you have two ScrollTrigger instances affecting basically the same element:

 

Is worth noticing that both ScrollTrigger instances share similar config objects, same trigger, same pinned element, among others. Why not create just one?

 

On top of that if you check the console, your codepen example is throwing a lot of errors when that second start point is passed, you might want to check that. Basically in your render callback this is undefined: const img = images[position.frame] so obviously checking the width and height properties becomes an error.

 

Finally I think you don't have a good grasp of how the start and end points work in ScrollTrigger. When you pass this:

    scrollTrigger: {
      scrub: 0.5,
      trigger: ".track",
      start: 452,
      end: "500hv",
      pin: ".brick-wrap",
      markers: true,
    },

ScrollTrigger basically waits for the user to scroll exactly 452 pixels to start the animation regardless of the trigger position, same here:

scrollTrigger: {
  scrub: 0.5,
  trigger: ".track",
  start: scrollableFrameStart,
  pin: ".brick-wrap",
  markers: true,
}

Which at that point is zero: let scrollableFrameStart = 0; so basically it starts right away.

 

I strongly recommend you two things, first create your two animations so they work independent of each other without using ScrollTrigger, just focus on the animations first. When the animations work as expected, then add ScrollTrigger to the mix. Second it would be a good exercise to just use ScrollTrigger to check the start and end points with a dummy <div> element and not your animation, so you get a good grasp of how start, end, pinning and other basic things work, without worrying about the animation. Then you should venture into integrating your animation with ScrollTrigger. Right now you're trying to solve a bunch of things at the same time and creating more issues in the process, that is just not going to work. Take it one step at a time.

 

Finally if I was you I'd start by trying to make something work using this demo as a starting point. Split the sequence into two timelines in order to get practice, since the amount and weight of the images you are using in your current demo is quite a lot:

See the Pen 2152a28cffe2c2c0cca8a3e47f7b21c6 by osublake (@osublake) on CodePen

 

Hopefully this helps.

Happy Tweening!

[JonathanCDev]

If I comment out the scrollAnimation2 it works fine I just want it to continue to srcub once animation loop is done. From 1-300 frame change with scroll and once at 300 it trigger the animation loop that is from 300-450. I want to be able then to be able to scrub again from 450-599.

[Rodrigo]

2 minutes ago, JonathanCDev said:

If I comment out the scrollAnimation2 it works fine I just want it to continue to srcub once animation loop is done. From 1-300 frame change with scroll and once at 300 it trigger the animation loop that is from 300-450. I want to be able then to be able to scrub again from 450-599.

Mhhh... sorry I don't quite get what you're trying to do. It does somehow ring the bell of what was done in this thread:

Is worth noticing that creating what you're trying to do might not be the simplest thing and once again I recommend you to start with the simplest possible approach. If I was you I would completely ditch the canvas stuff right now and focus on getting the effect you're looking for just with a regular <div>. Once you see that you're achieving what you're looking for with the simplest possible setup, start adding the canvas animations one at a time.

 

Check that thread and hopefully it'll help.

Happy Tweening!