janpaepke / ScrollMagic

The javascript library for magical scroll interactions.
http://ScrollMagic.io
Other
14.9k stars 2.17k forks source link

Scene offsets a centered element when leaving the page and coming back #707

Open bbtdev opened 7 years ago

bbtdev commented 7 years ago

Hey, So I have a centered element, when I create a scene for that element and go to another page (same window) 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.

Can you please help me with this?

mattjbrent commented 7 years ago

link? code?

bbtdev commented 7 years ago

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

}

I tried to use a CodePen, but it doesnt work the same: https://codepen.io/anon/pen/ZJLarx

Thank you for much for your interest!!!