Address Bar on mobile messes up the positioning of an element after animation

[Riccardo1091 1 Likes (Newbie)]

Hi, it's me again, I've achieved what I wanted both on desktop and mobile but on the latter I have this new problem of the addresbar messing things up.

Let me explain, on mobile I have positioned this "isthmo" logo right above the bottom of the page, if I swipe up it goes on top, if I swipe down it goes back to the starting point. The address bar keeps getting in the way, I don't think u can see the problem on the codepen due to its structure so I'll attach some screenshots from the real website. 

I tried:
ScrollTrigger.normalizeScroll(true);

but it wasn't working well, plus disabled the page refreshing swiping down

Should I try:

ScrollTrigger.config({ ignoreMobileResize: true})

 

Thanks for your patience

See the Pen rNdedwa by Mahanon (@Mahanon) on CodePen

[Cassie 5,072 Likes (Superhero)]

Hey there - Have you tried ScrollTrigger.config({ ignoreMobileResize: true}) ?

 

That's what it's for!

[Riccardo1091 1 Likes (Newbie)]

46 minutes ago, Cassie said:

Hey there - Have you tried ScrollTrigger.config({ ignoreMobileResize: true}) ?

 

That's what it's for!

Hi, nothing changed unfortunately, it works when I try it on pc browser in the responsive mode but not on a real smartphone, same problem as above.

By the way I've loaded the ScrollTrigger plugin first, am I missing something, I see no errors on the console.

[GreenSock 18,233 Likes (Superhero)]

The ignoreMobileResize is for ScrollTrigger stuff, but you're only using Observer to do your own custom stuff, so it's completely unrelated. 

 

I noticed several problems:

1. You are pre-calculating the destination values based on the window.innerHeight when the page loads, but you must keep in mind that on mobile devices, when the address bar shows/hides, it CHANGES the viewport height. You need to factor that in. It may be a lot more complex on mobile because it looks like you've got height to set to "initial", thus it may be px-based. You'll make things much easier on yourself if you set an explicit height in vh so everything remains proportional. 
2. You're firing a new animation literally on EVERY wheel/touch/scroll event. Not only are you creating a ton of conflicting animations that are all trying to animate the same thing, you'll see a delay in things actually animating because you're using a in-out ease so that at the start, things move very slowly. Thus if you're constantly creating new tweens, it'll only move a tiny tiny bit until you STOP scrolling and let the animation actually run. 
3. Small thing: ease: Quart.easeInOut is the very old syntax and can be simplified to ease: "quart.inOut". 

You should only create a new tween when necessary - like when the direction changes. 

 

Here's how I'd probably do it:

See the Pen vYRKZMp?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Does that help? 

[Riccardo1091 1 Likes (Newbie)]

Thank you, the only thing is that I need the logo (isthmo) to occupy just the space it needs, not 50vh, keeping proportions. This way we're gonna end up with a bunch o white background above and below the logo on other devices.

 

[Riccardo1091 1 Likes (Newbie)]

I think the solution lies HERE, I just need to figure out how to link the yPercent to the variable in the article....

[GreenSock 18,233 Likes (Superhero)]

 Yeah, let us know if you've got any GSAP-specific questions and we'd be happy to help with those. Good luck. 👍