Scrolltrigger - Adjust 2 X scrolltriggers into a single scrolltrigger - image sequence with titles

[newguy123]

Hi guys

 

This 1st pen, which currently runs 1 scrolltrigger for the image sequence, and another scrolltrigger for 4 X equal titles as targets split over the duration of the image sequence: (see 1st pen)

 

 

However, instead of having the 4 titles come up equally split over the duration of the image sequence, I want to have each title come up at a specific location during the image sequence, and also I want to have them as part of the image sequences' scrolltrigger, thus having 1 scrolltrigger in total, instead of 2, however, as you can see, I'm having no joy to do this. Now everything just animates by itself and scrolltrigger appears to have no affect as you can see here: (see 2nd pen)

 

 

See the Pen LYarLmE by newguy123 (@newguy123) on CodePen

 

 

See the Pen jOJKwQp by newguy123 (@newguy123) on CodePen

[newguy123]

...or would it be better to keep it as 2 different scrolltriggers?

 

 

[Rodrigo]

Hi,

 

This is mostly about JS logic and Math rather than a GSAP related issue. Normally we don't spend time in solving these type of issues for our users but it was a fun challenge and the result might come in handy for other users as well:

 

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

 

Finally is worth noticing that your CSS was a bit messy and you didn't selected a CSS pre-processor in codepen so it wasn't really working properly. Also ScrollTrigger.matchMedia was deprecated in favour of GSAP MatchMedia:

https://gsap.com/docs/v3/GSAP/gsap.matchMedia()

 

Hopefully this helps.

Happy Tweening!

[newguy123]

21 hours ago, Rodrigo said:

Hi,

 

This is mostly about JS logic and Math rather than a GSAP related issue. Normally we don't spend time in solving these type of issues for our users but it was a fun challenge and the result might come in handy for other users as well:

 

 

 

 

Finally is worth noticing that your CSS was a bit messy and you didn't selected a CSS pre-processor in codepen so it wasn't really working properly. Also ScrollTrigger.matchMedia was deprecated in favour of GSAP MatchMedia:

https://gsap.com/docs/v3/GSAP/gsap.matchMedia()

 

Hopefully this helps.

Happy Tweening!

Thanks Rodrigo. It appears to work in this simple example, however if I stick a much longer sequence in here, and change the variable 'frameCount=147' to 'frameCount=1000', and then also adjust the target start and end values, then it does not appear to work.

 

The start and end values DO NOT start on the correct frame in the sequence. For example if I enter for the 1st targets start value 50 and end value of 100, I expect that to correspond to the same frame numbers in the image sequence, but its corrently not like that.

 

I saw a few weeks ago somebody on this forum mention something about a 'position' paramater that would perhaps work better for the titles to come up to the correct frames according to the frame sequence. I cant find that post now. Any idea what this 'position' value is and how that may be used instead?

[Rodrigo]

Hi,

1 minute ago, newguy123 said:

I saw a few weeks ago somebody on this forum mention something about a 'position' paramater that would perhaps work better

That is exactly what I'm doing here:

targets.forEach((target, i) => {
  const start = targetFrames[i].start / (frameCount - 1);
  const end = targetFrames[i].end / (frameCount - 1);
  const duration = 5 / (frameCount - 1);
  console.log(target);
  console.log(duration, start, end);
  tl.to(
    target,
    {
      opacity: 1,
      duration: duration
    },
    start // POSITION PARAMETER
  ).to(
    target,
    {
      opacity: 0,
      duration: duration
    },
    end // POSITION PARAMETER
  );
});

 

I set the duration of the canvas rendering Tween to 1 second, like that I can set up start and end points for the text animations on a percentage based values between 0 and 1 (the duration of the canvas rendering sequence goes from 0 to 1), that's why I'm using some value between frame 0 and total frames minus one. As I mentioned before this is mostly about logic and math. If you have 100 or 10,000 frames doesn't matter as long as you keep the duration of the image sequence at 1 (with ScrollTrigger it really doesn't matter) and you create values that goes between 0 and 1 based on which particular frame you want a tittle to show and then hide.

 

Hopefully this clear things up.

Happy Tweening!

[newguy123]

5 minutes ago, Rodrigo said:

Hi,

That is exactly what I'm doing here:

targets.forEach((target, i) => {
  const start = targetFrames[i].start / (frameCount - 1);
  const end = targetFrames[i].end / (frameCount - 1);
  const duration = 5 / (frameCount - 1);
  console.log(target);
  console.log(duration, start, end);
  tl.to(
    target,
    {
      opacity: 1,
      duration: duration
    },
    start // POSITION PARAMETER
  ).to(
    target,
    {
      opacity: 0,
      duration: duration
    },
    end // POSITION PARAMETER
  );
});

 

I set the duration of the canvas rendering Tween to 1 second, like that I can set up start and end points for the text animations on a percentage based values between 0 and 1 (the duration of the canvas rendering sequence goes from 0 to 1), that's why I'm using some value between frame 0 and total frames minus one. As I mentioned before this is mostly about logic and math. If you have 100 or 10,000 frames doesn't matter as long as you keep the duration of the image sequence at 1 (with ScrollTrigger it really doesn't matter) and you create values that goes between 0 and 1 based on which particular frame you want a tittle to show and then hide.

 

Hopefully this clear things up.

Happy Tweening!

Ok but if my totalframes are 1000, I dont understand then how to get the 1st target to come up at frame 50

Even though I set its start to 50 and it's end to 100, it actually comes up around frame 38 or 39

Why is that, and how can I make it EXACT?

[Rodrigo]

Hi,

 

Without a minimal demo there is not a lot we can do, just make sure to have ease: "none" in the sequence tween and perhaps the titles ones as well.

 

Happy Tweening!

[newguy123]

1 hour ago, Rodrigo said:

Hi,

 

Without a minimal demo there is not a lot we can do, just make sure to have ease: "none" in the sequence tween and perhaps the titles ones as well.

 

Happy Tweening!

My sincere apologies!

 

I found the issue. We worked out the start/stop frames from our mp4, which is at 25 FPS. When the mp4 was converted to stills, it was exported at 30 FPS, meaning the sequence had way more frames than the mp4 and that's why things didnt line up!

 

So all sorted now, thanks!!!