Elements are not working properly on screen2 leave and screen1 enter

[UserX]

Hello Greensock community
i am facing the issues in above codepen can you help to solve below two issue and why they are creating problem. 

=> WHEN SCREEN 2 IS STARTING ALL THE RIGHT SIDE TEXT CARDS ARE CHANGING SO FAST AND NOT WORKING WITH LEFT CARDS  WITH TIME EXAMPLE => (BANK-CARD-IMG === BANK-CARD-TEXT).

 

=> WHEN WE REVERSE THE SCROLL FROM SCREEN-2 TO SCREEN-1 ALL LEFT SIDE CARDS ARE NOT WORKING ACCORDING TO SCREEN 1   AND BREAKING CARD ANIMATION.

See the Pen XWRoJqy by vijaysolankiii (@vijaysolankiii) on CodePen

[Cassie]

Hi there @UserX
 

4 hours ago, UserX said:

=> WHEN SCREEN 2 IS STARTING ALL THE RIGHT SIDE TEXT CARDS ARE CHANGING SO FAST AND NOT WORKING WITH LEFT CARDS  WITH TIME EXAMPLE => (BANK-CARD-IMG === BANK-CARD-TEXT).

If you want an animation to last longer you'll need to increase the duration of that tween or the scroll distance (or both)

 

4 hours ago, UserX said:

=> WHEN WE REVERSE THE SCROLL FROM SCREEN-2 TO SCREEN-1 ALL LEFT SIDE CARDS ARE NOT WORKING ACCORDING TO SCREEN 1   AND BREAKING CARD ANIMATION.

I don't understand this I'm afraid.

[GreenSock]

I don't understand your question either, but I noticed you've got CSS transitions applied which is a very bad idea. Never apply CSS transitions to the same things you're animating with GSAP because when GSAP tries to make the change, the CSS transition will prevent it from happening right away and instead it'll try to gradually apply it. Very bad for performance too. Just animate it with GSAP.