[A tag click event GSAP timeline animation not working properly]

I created this very simple animation and what i wanted to achieve
- when when click one A tag animation will start and end
- when we click while animation is still paying it will restart
- it will play animation again after animation completed 

what problems im experiencing 
- some time animation wont play
- some times its play but glitchy slow motion
- it only play one time and dont play after clicking again

See the Pen bGqOzvB by AkhilRaja (@AkhilRaja) on CodePen

[GSAP ScrollTrigger Horizontal Scroll Timeline Animation]

thank you ill work on it 😊

[GSAP ScrollTrigger Horizontal Scroll Timeline Animation]

55 minutes ago, akapowl said:

Hello and welcome to the forums @AkhilRaja.

 

Since you are not actually scrolling horizontally but only just faking horizontal scroll-behaviour with a tween on vertical scroll, you can not use the horizontal property of ScrollTrigger and have to calculate the start and end yourself.

 

Here is the demo from the demos-section showcasing that

 

 

 

 

 

Here you'll find a more detailed explanation about why it is neccessary to include an offset in your calculations

 

 

 

 

And here is what that would look like in your example with the start and end as you mentioned

 

 

 

 

 

 

Hope this helps get a better understanding.

Happy scrolling  

 

Thank u sir for telling me importance of OffSet and ill work on this 😊,

and also sir can u tell me when i can use horizontal: true what should i do to work with this, i want to try this and i also want to see my Markers at #SectionB Left Start and Right End Point so i can have more easy control on the animation, like sometimes we want to use start: "35% 52%",   or any other values to set a start and end point for an animation

[GSAP ScrollTrigger Horizontal Scroll Timeline Animation]

I created a horizontal scroll website and then i want to create Gsap timeline animation by setting SectionB as the trigger element for the scrub animation as [trigger: "#SectionB"] and [start: "0% 100%", end: "100% 0%",] will be starting and end point.

my problems
- I can not set markers [start: "0% 100%", end: "100% 0%",] on #SectionB
- I can not create animation start at SectionB Left Most Side and End at SectionB Rigt Most Side

if anyone can help me set markers at SectionB as [start: "0% 100%", end: "100% 0%",] I can achieve my goal

Thank You

See the Pen PopdVMe by AkhilRaja (@AkhilRaja) on CodePen