[Scene offsets a centered element when leaving the page and coming back]

Hey thank you for your response. This situation occurs when I create a tween that moves x or y, if I use only opacity there is no problem. I was hoping it was a known issue.

The recentering occures when you resize the window, because I made it responsive.

[Scene offsets a centered element when leaving the page and coming back]

Hey guys,

So I have a centered element, when I create a scene for that element and go to another page (same window, scroll a little) and then coming back, the element is not centered anymore. It is moved a little to the left, even though my tween has only up and down movement.

I tried to replicate on codepen, doesn't work.

 

The original site:

https://alacreme.000webhostapp.com/alczzz3/index.html

 

On the first page you see "pasiunea gustului..." that goes down when you scroll. This p is centered.

Now scroll down, where you see a facebook link, click it, scroll down on it. Now go back to page and scroll up untill you see "pasiunea gustului" again it is not centered anymore, refresh to see. Sometimes it does it, sometimes it doesn't.

 

The code for the centering of p:
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

The code for the tween:
tween_slogan_first = createTweenMoveVerticalEaseNone(slogan_first, 1, 0, $(slogan_last).parent().height(), 0);

function createTweenMoveVerticalEaseNone(element, tween_time, opacity_var, distance) {
return TweenMax.to(element, tween_time, {
opacity: opacity_var,
y : distance,
ease: Linear.easeNone
});
}

The code for the scene

scene_slogan_first = createScene($('#acasa'), 'onCenter', $(window).height()/2, $(window).height()/2, true, tween_slogan_first, false);

function createScene($trigger, trigger_hook_var, offset_var, duration_var, reverse_var, tween, tween_changes) {
return new ScrollMagic.Scene({
triggerElement: $trigger,
triggerHook: trigger_hook_var,
offset: offset_var,
duration: duration_var,
reverse: reverse_var
})
.setTween(tween) // pins the element for the the scene's duration
// .addTo(controller) // assign the scene to the controller
.tweenChanges(tween_changes);

}

See the Pen ZJLarx by anon (@anon) on CodePen