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? ?

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. ?

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.

@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.

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

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 }, ">" );

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. ?

Hi Cassies. Thanks for all the above extra info. I included my timeline code so that it was clear I was talking about a pinned scrollTrigger timeline. My question has not quite been answered, I may have complicated it, let me try again. For any scrollTrigger timeline even the simplest, would adding scrollSmoother be good/best practice to help give some extra polish (good feeling)? (not using any parralax etc, but simply just registering it and applying it to the timline?) Thank you. ?

Hi. Please note: this is a general question asking if the plugins will work well in a positive way when using pinned scrollTrigger timelines. I have a large scrollTrigger timeline which is pinned and I want to do everything I can do to make it feel as smooth as possible. Can you use scrollSmoother on/for scrollTrigger timeline's which are pinned? timeline code is here if it helps: let tl = gsap.timeline({ onUpdate: render, defaults: { ease: 'none', }, scrollTrigger: { trigger: section, pin: true, // pin the trigger element while active start: 'top top', // when the top of the trigger hits the top of the viewport end: '+=1000%', // end after scrolling 500px beyond the start scrub: 0, // smooth scrubbing, takes 1 second to "catch up" to the scrollbar: was 1 anticipatePin: 1, invalidateOnRefresh: true, }, })

Side note: Killer, I need to upgrade, waiting to see if they eventually do a M? iMac 27" or bigger. Thanks so far. ?

Thanks for that, I appreciate your hunch, opinion, I will be testing on other machines. Lastly may I ask what Mac device you viewed on? Mine is: iMac (Retina 5K, 27-inch, Late 2014)

Thanks @GreenSock I will need some more help and will make a codePen when I ask for it. Shall I post a brand new topic, or continue it here?

Ok thanks. May I ask what version of MacOS Safari you viewed on? Mine is: Version 16.5 (16615.2.9.11.6, 16615)

@GreenSock Thanks for your reply. Is normalizeScroll an iOS only thing? My issue is macOS Safari, did you look on macOS?

Hi @fonveton I have a similar issue here: https://www.mtbarkerwaldorf.sa.edu.au Make sure you are in Safari. Just scroll up and down and make the first 2 blobs go off screen and come back on screen (second section on page) and you will notice a flash of content (the blobs). Is the same behaviour you were experiencing? If so, what was the correction in your calculations for offset().top that you made? Thanks. Att: @GreenSock