trapdaf

FIXED ! it was my repeat.

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);