Jump to content
Search Community

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

bbtdev test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

I'm not really sure what's happening there, but I did notice that resizing the browser when that <p> is off-center will cause it to immediately recenter itself. I'm not seeing how GSAP could be responsible since you're centering via your CSS. It just seems like a weird window calculation when you come back to the site and scroll up again. It's pretty tough to diagnose a website instead of a CodePen demo.

 

I'd recommend removing ScrollMagic, GSAP and any unnecessary CSS  from the site and see if that changes anything. Then start adding things back one by one until it does that again. You'll have then found your culprit. Others may have additional advice. 

 

Happy tweening.

:) 

  • Like 2
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...