kubik101 Posted August 13, 2023 Share Posted August 13, 2023 (edited) 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. Link to comment Share on other sites More sharing options...
kubik101 Posted August 13, 2023 Author Share Posted August 13, 2023 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 }, ">" ); Link to comment Share on other sites More sharing options...
kubik101 Posted August 13, 2023 Author Share Posted August 13, 2023 @OSUblake - Hi OSUblake, wanted to draw your attention to this, hope you don't mind. Link to comment Share on other sites More sharing options...
mvaneijgen Posted August 13, 2023 Share Posted August 13, 2023 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. Link to comment Share on other sites More sharing options...
kubik101 Posted August 13, 2023 Author Share Posted August 13, 2023 @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. 1 Link to comment Share on other sites More sharing options...
Rodrigo Posted August 14, 2023 Share Posted August 14, 2023 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 Link to comment Share on other sites More sharing options...
kubik101 Posted August 14, 2023 Author Share Posted August 14, 2023 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. Link to comment Share on other sites More sharing options...
Rodrigo Posted August 14, 2023 Share Posted August 14, 2023 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! Link to comment Share on other sites More sharing options...
kubik101 Posted August 14, 2023 Author Share Posted August 14, 2023 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. 😃 Link to comment Share on other sites More sharing options...
kubik101 Posted August 25, 2023 Author Share Posted August 25, 2023 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? 😃 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now