Open bbtdev opened 7 years ago
link? code?
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!!!
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?