kRYstall9 Posted September 8, 2022 Share Posted September 8, 2022 Hi. I'm having some trouble with the scrollTr igger plugin and, because of that, I'm not able to make any animation. I have no idea why I cannot see the marker on top of the container. Can anybody help me understand why this is happening?It seems like the markers are not on the top of the .demoman container, but they're at the top of the container that contains everything Link to comment Share on other sites More sharing options...
SteveS Posted September 8, 2022 Share Posted September 8, 2022 Have you tried it without your CSS translate? Link to comment Share on other sites More sharing options...
GSAP Helper Posted September 8, 2022 Share Posted September 8, 2022 It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer. Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen If you're using something like React/Next/Nuxt/Gatsby or some other framework, you may find CodeSandbox easier to use. Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. Link to comment Share on other sites More sharing options...
kRYstall9 Posted September 8, 2022 Author Share Posted September 8, 2022 @SteveS I tried without the CSS translate, but nothing works at all.@GSAP Helper See the Pen eYrJbKa by kRYstall9 (@kRYstall9) on CodePen is the code snippet. I literally copied almost everything of my code. On codepen it seems "working", at least for the markers position. The animation isn't working at all, as you can see on codepen Link to comment Share on other sites More sharing options...
SteveS Posted September 8, 2022 Share Posted September 8, 2022 What is supposed to be happening? Usually, markers are off because the layout shifts content after the markers are created. I can't really determine what you are looking for based on your description. Link to comment Share on other sites More sharing options...
kRYstall9 Posted September 8, 2022 Author Share Posted September 8, 2022 @SteveS This is what I mean. The video I linked show exactly what I mean. As you can see, even if I said that the markers should be on the top part of the container called "demoman", they're stuck on the top of the page. So, the animation just starts when the page loads, and not when the "scroller-start" pass through the start point. I hope I've well explained what the issue is Link to comment Share on other sites More sharing options...
Rodrigo Posted September 8, 2022 Share Posted September 8, 2022 The issue could be in the fact that the ScrollTrigger instance is created while the planet preloader (nice work by the way!!! 👍) and the content is not rendered in the screen yet, so at that point the position of the target element is zero pixels from the top of the view port. You have to find a way to run your code after the elements are in their final position. What are we talking about here, React, Vue, Svelte, Vanilla JS or something else? Happy Tweening!!! Link to comment Share on other sites More sharing options...
kRYstall9 Posted September 8, 2022 Author Share Posted September 8, 2022 @Rodrigo Thanks for the answer! I'm using Express in order to have more than one route. Other than that, it's everything vanilla JS Link to comment Share on other sites More sharing options...
Solution Rodrigo Posted September 8, 2022 Solution Share Posted September 8, 2022 You should check the positions of your trigger elements using getBoundingClientRect(): https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect Also wait until everything is loaded and rendered in order to create your ScrollTrigger instance. @Cassie made this video with Jake about this particular subject that should result very helpful: Happy Tweening!!! Link to comment Share on other sites More sharing options...
kRYstall9 Posted September 9, 2022 Author Share Posted September 9, 2022 @Rodrigo Thanks a lot! I've been able to fix the problem Link to comment Share on other sites More sharing options...
Sakil_Anwar12 Posted November 13, 2022 Share Posted November 13, 2022 On 9/9/2022 at 6:27 PM, kRYstall9 said: @Rodrigo Thanks a lot! I've been able to fix the problem how? pls share Link to comment Share on other sites More sharing options...
LenaEvans Posted December 17, 2022 Share Posted December 17, 2022 On 9/9/2022 at 4:46 AM, Rodrigo said: You should check the positions of your trigger elements using getBoundingClientRect(): https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect Also wait until everything is loaded and rendered in order to create your ScrollTrigger instance. @Cassie made this video with Jake about this particular subject that should result very helpful: Happy Tweening!!! Thanks for the video link. I am glad I found your post. I was searching for the https://letsgradeit.com/review/essayrepublic/ website online and when I was searching for it online, I found your post link. I want to hire an essay writer and that is why I was searching for that website link. Thanks for the video link. 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