Jump to content
Search Community

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

Riccardo1091 test
Moderator Tag

Recommended Posts

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:

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

Link to comment
Share on other sites

  • Riccardo1091 changed the title to Address Bar on mobile messes up the positioning of an element after animation
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.

Link to comment
Share on other sites

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? 

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...