Scroll Animation On Horizontal Scrolling

I created page this reference
link : Multi-Step GSAP Flip & ScrollTrigger - T.RICKS 1
used multiple elements to move from position A to B, then B to C, and so on. i have face the issue this technique applied in horizontal scrolling. that’s not proper worked. element is scrolled only one first element and then it moves to the next section not others horizontal elements . please any solution to fix this problem ?

Untitled design (1)

Thank you in advance!!
-Nensi Butani

i’ve never used GSAP yet but maybe you can try adding a white background color to the horizontal scrolling section so that your blue circle would be hidden behind it while it’s moving to the section below it.

or can you separate the animation to two different animations? so that you don’t have to move the blue circle from one section to another?

No, I can’t separate the animation to two different animations.
also I added fullpage.js library it’s not work for horizontal scrolling.
and Dot animation doesn’t work properly after adding fullpage.js library
can you please check this problem and solved?

link : Home page

Hi Nensi,

I’d recommend staying within the GSAP environment when animating with it, especially when they rely on each other. GSAP also has its own horizontal scrolling feature, which works great!