Markers are not in the right position

[kRYstall9]

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

[SteveS]

Have you tried it without your CSS translate?

[GSAP Helper]

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. 

[kRYstall9]

@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

[SteveS]

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.

[kRYstall9]

@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

[Rodrigo]

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

[kRYstall9]

@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

[Rodrigo]

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

[kRYstall9]

@Rodrigo Thanks a lot! I've been able to fix the problem

[Sakil_Anwar12]

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

[LenaEvans]

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.