A página possui várias seções de texto em sequência.
Quando o usuário rola para baixo um elemento visual (duas esferas aninhadas) se movem em conjunto com a rolagem. Atrás do conteúdo há um canvas fixo, onde as esferas são desenhadas.
Preciso definir posições diversas para as esferas em cada seção, e a transição entre esses pontos.
Para atingir isso estou usando as Timelines da biblioteca GSAP, e sincronizando as timelines com a rolagem usando a biblioteca ScrollMagic.
Porém, não estou conseguindo atualizar a posição das esferas, aparentemente se criou mais de uma timeline apontando para a mesma esfera, elas entram em conflito, talvez o ScrollMagic não às pause, não sei ao certo.
Alguém tem algum exemplo de algo similar, preferencialmente com essas tecnologias?