[GSAP + ScrollMagic bound TimeLine's animation]

FIXED ! it was my repeat.

[GSAP + ScrollMagic bound TimeLine's animation]

I'm a student developer. I wanted to know how could i bound my animation on the scroll  : 

i tried many things but now I think I need a hand.

 

I want my sprite and my background moving in the same time bounded on the scroll.

boySprite = [
    './assets/img/scene1/boy-1.svg',
    './assets/img/scene1/boy-2.svg',
    './assets/img/scene1/boy-3.svg',
    './assets/img/scene1/boy-2.svg'
];

var controller = new ScrollMagic.Controller();


var element = $('.act_second');
console.log(element.find('.img--bg'))

var scene1 = new TimelineMax({repeat: -1});
scene1
    .set(element.find('.img--boy'),{attr: {src: boySprite[0]}}, '+=0.5')
    .set(element.find('.img--boy'),{attr: {src: boySprite[1]}}, '+=0.5')
    .set(element.find('.img--boy'),{attr: {src: boySprite[2]}}, '+=0.5')
    .set(element.find('.img--boy'),{attr: {src: boySprite[3]}}, '+=0.5')
    .add(function() {
        console.log('done')
    })

var scene1Bg = new TimelineMax({repeat: -1});
scene1Bg
    .to(element.find('.img--bg'), 3, {right: '0%', ease:Linear.easeNone});

scene1Final = new TimelineMax({repeat: -1});
scene1Final.add([scene1, scene1Bg]);


var scene1Controller = new ScrollMagic.Scene({
    duration: 1200,
    offset: 150,
    reverse: true,
    triggerElement: '.act_second'
})
    .setPin('.act_second')
    .on('start', function() {
        scene1Final.play();
    })
    .setTween(scene1Final)
    .addIndicators({name: "boy-walk"})
    .addTo(controller);