GSAP scrollTrigger Image Sequence - 2 sequences push frame to same/one canvas

[kubik101]

Hi GSAP community.

 

2 image sequences
2 canvas'

 

Text appears in the middle/between the 2 sequences

Each image sequence renders to their respective canvas.

 

I would like some help setting things up so that the 2 sequences become 1 longer sequence rendering to 1 canvas.

 

But I need the ability to pause or hold this longer single sequence at a particular frame number, so I can animate (text for example), at specific points in the sequence.

 

Please note, if this is achievable I will scale things up to a much larger sequence which will require very specific control to be able to hold/pause (for a declared period of time) at multiple points in the timeline at specific frame numbers etc.

 

To help things along I have a folder at the same location as the other folders called "000" so replace the first sequence's location "001" with "000".
- There are 51 images in the "000" folder and the first pause point would be at frame "26" if we are to replicate my codpen example.

 

Thanks guys.

😃

See the Pen NWEZZQj by kubik101 (@kubik101) on CodePen

Edited August 13, 2023 by kubik101
I think i was complicating things, so have re-asked the question in following post.

[kubik101]

I think my original post/question is dictating and confusing the possible solution too much.

 

So I would like to pose it more simply:

I like how everything works in my codpen example, but wondering if it's possible to make each sequence (and there could be 7 or more in the end) always push it's frame into the same/one canvas (so there is only one canvas on the page).

 

My approach would be something like this:

tl.to(
  sequenceOne,
  {
    frame: ???? -1,
    snap: "frame",
    duration: 2
  },
  ">"
);

// some stuff inbetween

tl.to(
  sequenceTwo,
  {
    frame: ???? -1,
    snap: "frame",
    duration: 2
  },
  ">"
);

// some stuff inbetween

tl.to(
  sequenceThree,
  {
    frame: ???? -1,
    snap: "frame",
    duration: 2
  },
  ">"
);

 

[kubik101]

@OSUblake - Hi OSUblake, wanted to draw your attention to this, hope you don't mind.

[mvaneijgen]

Hi @kubik101 please don't mention our moderators directly  in hopes of getting an answer faster. Everyone has to wait their turn, we want to help people on these forum equally, no matter if they are a Club Greensock member or not... we strive to answer everyone within 24 hours, but currently it is a Sunday, so it may take a bit longer. 

[kubik101]

@mvaneijgen Understood. Won’t do it again. Wasn’t in hope of speed. But in hope the right person sees it. I know he’s been involved with this topic a lot and may have written the original example.

[Rodrigo]

Hi,

 

Your example seems to be working as expected unless I'm missing something and you are totally right, creating a timeline with the text animation between two instances that update the current canvas frame should work and seems to work in the codepen example you added in your first post.

 

Let us know if you have other questions.

Happy Tweening

[kubik101]

Hi Rodrigo.

 

Yes you are missing the key request.

 

I am wondering if it's possible to make each sequence (and there could be 7 or more in the end) always push it's frame into the same/one canvas (so there is only one canvas on the page) ?

 

Thank you.

[Rodrigo]

Hi,

 

Yeah, as long as the first frame of the next sequence or timeline section is either the same as the last one or the last one plus one it doesn't matter. You can definitely use the same canvas element and use the same update method to render that particular image in said canvas element.

 

Happy Tweening!

[kubik101]

Hi Rodrigo.

 

I am hoping for some hands on help as I don't have the skill or knowledge to know what to change or add.

I understand the concepts but don't know how to implement.

 

Can anyone help provide a working solution?

 

- - - 

Just a FYI for those looking to help.

 

I am wondering which solution would be better:

 

1) Multiple sequences always rendering to a single canvas.

OR

2) One sequence (with all frames in folder) where within each tl.to you declare the frame range (start and end frame).

 

** There are 51 images in the "000" folder which contain all the frames from folders "001" and "002"

- - - 

 

Thank you.

😃

[kubik101]

Hi @Rodrigo,

 

Would you be able to help me edit my codepen example to use only one canvas as you've suggested would be possible please?

 

😃