niks0203 Posted July 20, 2022 Share Posted July 20, 2022 Hi I need to develop multiple image sequence using ScrollTrigger like the verkada access page https://www.verkada.com/access-control/ (first section). I have the section on the middle of the page. So i am facing 2 issues- one after the last scroll, at the scroller-end, there is a black background where i need the last animated slide instead of black background. Second, the scroller-start position shifts down if we refresh the page when the scroller is in middle section of the page See the Pen yLKbLZP by niks0203 (@niks0203) on CodePen Link to comment Share on other sites More sharing options...
Cassie Posted July 20, 2022 Share Posted July 20, 2022 Hey there! I can't replicate this - could you explain the steps to recreate this issue? Quote Second, the scroller-start position shifts down if we refresh the page when the scroller is in middle section of the page Could you explain what you mean by 'last scroll' and which scroller-end you're talking about? Quote One after the last scroll, at the scroller-end, there is a black background where i need the last animated slide instead of black background. I've added id's for easier wayfinding See the Pen abYWOVB?editors=0010 by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
niks0203 Posted July 21, 2022 Author Share Posted July 21, 2022 Hi , I have edited my pen, You can see , there is substanial amount of white screen after the scroll ends. See the edited pen here See the Pen ExEmRdN by niks0203 (@niks0203) on CodePen I want to show the next container after the animation ends. Could you please guide me here. Link to comment Share on other sites More sharing options...
Cassie Posted July 21, 2022 Share Posted July 21, 2022 You have an error of Quote Uncaught InvalidStateError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The HTMLImageElement provided is in the 'broken' state. This isn't a GSAP errorhttps://stackoverflow.com/questions/22430671/javascript-failed-to-execute-drawimage 1 Link to comment Share on other sites More sharing options...
niks0203 Posted July 21, 2022 Author Share Posted July 21, 2022 Hi , I removed the error. Please check now. There is a white screen after the animation ends See the Pen ExEmRdN by niks0203 (@niks0203) on CodePen Link to comment Share on other sites More sharing options...
GreenSock Posted July 22, 2022 Share Posted July 22, 2022 You had multiple elements with the same ID and you created conflicting animations The container of your various canvas sections had a height of 500vh, creating that empty space at the bottom You had position: sticky which was messing some things up with the pinning The height of one of the containers of your canvas was 88vh instead of 100vh, so it was clipping it. Another sub-container was set to 100vh which was preventing pinSpacing from having any effect (clipping) Basically, there were a lot of problems with the setup and structure in your CSS/HTML. I don't have time to fix everything for you and I'm not even really sure what effect you're looking for, but maybe this will give you a nudge in the right direction: See the Pen PoRjqxB?editors=0010 by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
niks0203 Posted July 22, 2022 Author Share Posted July 22, 2022 Hi , Thanks for the help, I am actually looking for the 2 image sequence to run one after another in the same container and so i kept them sticky . I want "A magical connection to your devices" to run first followed by "Simplicity from start to Siri" but at same location. So could you please guide me the correct way to achieve it. I thought of an alternate way of running all frames in one canvas but i want text to appear at different positions like we have on this website https://www.verkada.com/access-control/. Basically i want the animation similar to one just below the header. Link to comment Share on other sites More sharing options...
Cassie Posted July 22, 2022 Share Posted July 22, 2022 Hey again! What would be the most helpful for you here is to step back, get rid of the code you currently have (for now) and just break down the text animation. All that's happening is there's a container that's pinned and some text that's scrolling. Here's a starting point. Simplify simplify simplify. It's always the way forward. See the Pen poLwyBz?editors=1010 by GreenSock (@GreenSock) on CodePen 2 Link to comment Share on other sites More sharing options...
niks0203 Posted July 22, 2022 Author Share Posted July 22, 2022 Hi, I got the above demo of moving objects on scroll but i need the image frame sequence instead of background. How should i add that? Link to comment Share on other sites More sharing options...
Cassie Posted July 22, 2022 Share Posted July 22, 2022 You'd need to replace the image with the canvas and then use the code from the previous example. We're happy to help with GSAP specific questions if you're stuck, but you have all the information here necessary to make a stab at it yourself now. Why don't you give it an attempt? Good luck! Link to comment Share on other sites More sharing options...
niks0203 Posted July 24, 2022 Author Share Posted July 24, 2022 Hi, I have edited my pen See the Pen poLrodj by niks0203 (@niks0203) on CodePen . But I am unsure of using "to" with ScrollTrigger.create(). I have used canvas behind the text but failing to aniamting it. Also , I am looking for a way where I can control at what framenumber should i animate the text "one" , "two" and "three". Please advise. Link to comment Share on other sites More sharing options...
GSAP Helper Posted July 24, 2022 Share Posted July 24, 2022 We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "here are my requirements: ______, please show me how to build it" tutorials. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations. You can post in the "Jobs & Freelance" forum for paid consulting, or contact us directly. Otherwise, if you've got a GSAP-specific question just post that here along with a minimal demo and we'd be happy to take a look. Link to comment Share on other sites More sharing options...
niks0203 Posted July 27, 2022 Author Share Posted July 27, 2022 Hi, I was able to solve my issues above. I just wanted to understand if GSAP has some kind of preloader function which waits till all images are loaded. Currently my code has 110 image frames and each image is around 200 - 300 kb which is taking some time to render thus breaking the animation in between. Link to comment Share on other sites More sharing options...
GreenSock Posted July 27, 2022 Share Posted July 27, 2022 No, GSAP is an animation library, not an Image loading library so it doesn't have anything like that built in. It should be relatively straightforward to do in vanilla JS though. Glad to hear you got a solution working for your animation. 🙌 Link to comment Share on other sites More sharing options...
niks0203 Posted July 27, 2022 Author Share Posted July 27, 2022 Also , i wanted to ask if we have any callback function which tells us when the animation starts. as our section is in middle of the page and the start position shifts until the other top sections load. Link to comment Share on other sites More sharing options...
GreenSock Posted July 27, 2022 Share Posted July 27, 2022 All animations have an onStart callback - is that what you're asking? Link to comment Share on other sites More sharing options...
niks0203 Posted July 27, 2022 Author Share Posted July 27, 2022 I am asking because before my animation starts, the contaiiner has all elements visible and only when the animation starts (which i come to know because of markers enabled), the elements start appearing in proper flow Link to comment Share on other sites More sharing options...
GreenSock Posted July 27, 2022 Share Posted July 27, 2022 Sorry, I'm not really sure what you're asking here. Was my answer of onStart not helpful? If you still need help, please provide a minimal demo along with a very clear GSAP-related question and we'd be happy to help. Link to comment Share on other sites More sharing options...
niks0203 Posted July 27, 2022 Author Share Posted July 27, 2022 I will try with onStart function first and get back to you if i need anything 1 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