s.kubota Posted April 13, 2022 Share Posted April 13, 2022 I want to scroll a part of the screen horizontally with the scroll trigger, but it doesn't work with a warning. It is displayed that the target cannot be found. Is there a solution? I also wrote gsap.registerPlugin (ScrollTrigger), but I get a warning. Link to comment Share on other sites More sharing options...
GreenSock Posted April 13, 2022 Share Posted April 13, 2022 It's very difficult to troubleshoot without a minimal demo, but my guess is that you are trying to animate elements that don't exist yet because you put your script in the <head>, so when the browser executes it, the <body> hasn't even been parsed yet so the elements aren't parsed. Try either moving your <script> tags to the bottom of the </body> or you could execute your code in the onload or in a DOMContentLoaded event handler. Good luck! 1 Link to comment Share on other sites More sharing options...
s.kubota Posted April 13, 2022 Author Share Posted April 13, 2022 Sorry for the lack of information. I've never used CodePen ... You should write it under </ body>. Should I write only index.js below? I'm sorry I'm ignorant. Link to comment Share on other sites More sharing options...
GreenSock Posted April 13, 2022 Share Posted April 13, 2022 It's generally okay to load the library in the <head> but I strongly prefer to load all scripts just before the closing </body> tag so that: It allows the browser to parse/display the content faster It ensures that the elements you want to animate actually exist. So I personally would recommend moving all of your <script> tags down there. But again, that's not mandatory - you could just use an onload to delay the execution of your animation code until things are loaded. The whole point here is to wait to animate things until the page has loaded and the elements exist. Link to comment Share on other sites More sharing options...
s.kubota Posted April 13, 2022 Author Share Posted April 13, 2022 Thank you very much. It worked. It means that loading gsap is also the last. I want the screen to scroll horizontally in the middle, but I can't scroll to the end. How can we solve this case? Link to comment Share on other sites More sharing options...
GreenSock Posted April 13, 2022 Share Posted April 13, 2022 If you want help, you'll need to provide a minimal demo (like in CodePen or CodeSandbox). Otherwise, we just have no idea what's going on in your project or what the problem might be. You might want to look at the demos here https://greensock.com/st-demos Link to comment Share on other sites More sharing options...
s.kubota Posted April 13, 2022 Author Share Posted April 13, 2022 See the Pen bGexQpq by GreenSock (@GreenSock) on CodePen I want to implement an animation like this. Link to comment Share on other sites More sharing options...
OSUblake Posted April 13, 2022 Share Posted April 13, 2022 1 hour ago, s.kubota said: I want to implement an animation like this. So what do you need help with? The demo you posted seems to be working fine. Link to comment Share on other sites More sharing options...
s.kubota Posted April 13, 2022 Author Share Posted April 13, 2022 When I moved to my page, I got an error like this. Link to comment Share on other sites More sharing options...
OSUblake Posted April 13, 2022 Share Posted April 13, 2022 Did you put your scripts before the closing the body tag? It's very hard to answer a question without seeing the problem. I would suggest clicking the export button on the CodePen if you need to see how to set up a web page. Link to comment Share on other sites More sharing options...
s.kubota Posted April 13, 2022 Author Share Posted April 13, 2022 The script description is written before </ body>. What is panelsContainer? When I applied this script description and rewrote the class to my own, I got a lot of errors, but I don't know how to solve it. Link to comment Share on other sites More sharing options...
OSUblake Posted April 13, 2022 Share Posted April 13, 2022 You need to make sure that it exists. It clearly shows what is it in the demo. panelsContainer = document.querySelector("#panels-container") Link to comment Share on other sites More sharing options...
s.kubota Posted April 13, 2022 Author Share Posted April 13, 2022 It worked for the time being. Thank you very much. With the current settings, it is set to slide automatically and quickly for one page, but isn't it set to move by the amount of scrolling? Link to comment Share on other sites More sharing options...
OSUblake Posted April 13, 2022 Share Posted April 13, 2022 I'm not sure I understand your question. The horizontal animation is controlled by the start and end properties of your ScrollTrigger. If you want it to move slower, you can increase the end value. Link to comment Share on other sites More sharing options...
s.kubota Posted April 14, 2022 Author Share Posted April 14, 2022 I'm sorry it's hard to understand. I want to scroll horizontally like this page. https://h-u-g.co.jp/ Link to comment Share on other sites More sharing options...
OSUblake Posted April 14, 2022 Share Posted April 14, 2022 You posted a demo that does that, so I'm not sure what you're expecting as far as help goes. There's even more examples to learn from here... https://greensock.com/docs/v3/Plugins/ScrollTrigger#demos And here... https://greensock.com/st-demos/ And here... ScrollTrigger How-To Pens - a Collection by GreenSock on CodePen 1 Link to comment Share on other sites More sharing options...
s.kubota Posted April 16, 2022 Author Share Posted April 16, 2022 Thank you very much. I was able to solve it for the time being. 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