Several animations with 1 obj issue

[Sepika]

Hello.

I am trying to use ScrollMagic with GSAP to animate the object translating from section to section with additional x-axis movement, little rotation and scale.

I've illustrated it in codepen and simplified a little - in only y-axis movement.

If i refresh or load page above these 3 sections, everything works fine. All 3 steps works as it should be.

But.

If load/refresh lower, or on the second, or third section - animation doesn't work properly backwards... Especially on the first part of the animation - "The Item" doesn't get right coordinates.

I've tried setting the duration, bust it's not what it should be, and it didn't solved the issue also. I've tried making TweenMax.fromTo setting each step, it didn't worked also. And I've tried setting immediateRender:false to the tweens - didn't worked too...

Really looking forward your reply! Please, let me know if provided info is not enough and the link to the dev-version of the project is needed. Thank's for the help in advance!

[nevaehph]

I was having this issue as well. The problem is that when the page refreshes at a lower section, all the scene's tween will animate simultaneously, which results in the "item" not animating as intended.

My solution was to not have every scene be added into the controller all together but instead be added sequentially once one tween has finished animating using addCallback() from Tween. When the page is reloaded at a lower section, each animation will run sequentially and not simultaneously, preventing the issue from occurring.

//1st scene
var scene = new ScrollMagic.Scene({
    triggerElement: "#trigger_1",
})
.setTween(animation1)
.addTo(controller);

//2nd scene to be triggered at the lower sections
var scene2 = new ScrollMagic.Scene({
    triggerElement: "#trigger_2",
})
.setTween(animation2); //notice this scene was not added into the controller immediately

var animation1 = new TimelineMax().add([
    //animation 1 here
]);

var animation2 = new TimelineMax().add([
    //animation 2 here
]);

//add scene 2 to controller on animation1 completing it's animation
animation1.addCallback(function(){
    controller.addScene(scene2);
})

Hope this helps!

[Sepika]

I was having this issue as well. The problem is that when the page refreshes at a lower section, all the scene's tween will animate simultaneously, which results in the "item" not animating as intended.

My solution was to not have every scene be added into the controller all together but instead be added sequentially once one tween has finished animating using addCallback() from Tween. When the page is reloaded at a lower section, each animation will run sequentially and not simultaneously, preventing the issue from occurring.

//1st scene
var scene = new ScrollMagic.Scene({
    triggerElement: "#trigger_1",
})
.setTween(animation1)
.addTo(controller);

//2nd scene to be triggered at the lower sections
var scene2 = new ScrollMagic.Scene({
    triggerElement: "#trigger_2",
})
.setTween(animation2); //notice this scene was not added into the controller immediately

var animation1 = new TimelineMax().add([
    //animation 1 here
]);

var animation2 = new TimelineMax().add([
    //animation 2 here
]);

//add scene 2 to controller on animation1 completing it's animation
animation1.addCallback(function(){
    controller.addScene(scene2);
})

Hope this helps!

Thanks a lot for the reply. The development was some time ago, and I changed the way of the animation in the project that momen. But I hope your solution will help me in the future!