How can I stop a Repeat TweenMax animation, and below make another animation when I scroll down

[gotchu]

I was trying to make a  gallery animation, and then put some content below this one. Im new with GSAP, and I don't really find something that can help with this problem, any tips?

 

[GSAP Helper]

Hi there!

Apologies for the lack of response so far, but it looks like people are struggling to help with this question.
 

• A clear description of the expected result - "I am expecting the purple div to spin 360degrees"
• A clear description of the issue -  "the purple div only spins 90deg"
• A list of steps for someone else to recreate the issue - "Open the demo on mobile in IOS safari and scroll down to the grey container" 
• A minimal demo - if possible, using no frameworks, with minimal styling, only include the code that's absolutely necessary to show the issue. Please don't include your whole project. Just some colored <div> elements is great.