Marker shifting to different position

[Shafi Ahmed]

Hii i am new to gsap and i have been trying to do the animation where the text fades out on scroll and again fades in when scrolled back but when i do so the markers are shifting their position 
sorry if i have a lot of mistakes in code i'm trying to learn this

 

i want the effect like they have in this website at the start of the landing page

http://le-mugs.com/en/

See the Pen GRqLKEr by iamshafiahmed (@iamshafiahmed) on CodePen

[ZachSaucier]

Hey Shafi and welcome to the GreenSock forums. 

 

Let's first understand what your code is doing: Every time that the first ScrollTrigger you have is entered it creates a new ScrollTrigger. When every time one of those new ScrollTriggers is left (onLeaveBack), another ScrollTrigger is created. Thus you end up with a ton of ScrollTriggers and it still doesn't create the effect that you're wanting to have. You're overcomplicating things. 

 

You're also making one of the most common ScrollTrigger mistakes: using a general selector when you should be using a more specific one. It also doesn't make sense to use both toggleActions and a scrub. Maybe it'd be good to go back and re-watch the video about how ScrollTrigger works in the ScrollTrigger docs.

 

I'd set it up this way:

See the Pen xxOebrz?editors=0010 by GreenSock (@GreenSock) on CodePen

[Shafi Ahmed]

Thanks i'll go through the tutorials again Sorry for the trouble