Jump to content
GreenSock

MikeTheVike

parallax scrolling smooth when body is height:100%, but jumpy when height is set to fixed pixel dimensions

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

The CodePen css produces a nice smooth parallax scroll through my scenes(using ScrollMagic)...

 

When I add a height to the body of 1080px, the parallax still works, but the animation is really jumpy. Why does a fixed height on the body affect the animation so drastically? I'm hoping to solve this issue because I'm putting a drag scroll on everything, and it doesn't work when there isn't a fixed height on the body. Thanks for any ideas!

See the Pen PmJGNP by MikeTheVike (@MikeTheVike) on CodePen

Link to comment
Share on other sites

Hi MikeTheVike :)

 

I'm not sure I understand the question. I looked at your demo, but from what I could tell, all seemed to be working correctly. Are you saying this is a GSAP problem or a ScrollMagic issue. I'm not familiar with it, but you also mentioned dragscroll.js. Could you be more specific about what you think is causing the problem and if you could trim your demo to just the basics, that would be great.

 

Just an FYI, there are a lot of images missing in your demo though I don't know if they are necessary to see the issue. You're also loading two versions of GSAP (1.18 and 1.19.1). That may or may not case some issues, but I'd recommend removing the old one.

 

Thanks and happy tweening.

:)

  • Like 2
Link to comment
Share on other sites

Hi MikeTheVike  :)

 

I'm not sure I understand the question. I looked at your demo, but from what I could tell, all seemed to be working correctly. Are you saying this is a GSAP problem or a ScrollMagic issue. I'm not familiar with it, but you also mentioned dragscroll.js. Could you be more specific about what you think is causing the problem and if you could trim your demo to just the basics, that would be great.

 

Just an FYI, there are a lot of images missing in your demo though I don't know if they are necessary to see the issue. You're also loading two versions of GSAP (1.18 and 1.19.1). That may or may not case some issues, but I'd recommend removing the old one.

 

Thanks and happy tweening.

:)

 

PointC, thanks for taking a look. Sorry, I realize there is a lot of crap in there right now. You are correct that it works "ok" on load on the codepen. If you take a look at the CSS, there is a "height: 1080px;" that is commented out. Remove the commenting and then run it and notice the parallax scrolling animation is not smooth anymore. I'm trying to figure out why adding a fixed height to the body is making that happen. I'm not sure if it is a GSAP issue or a ScrollMagic issue, or maybe it can be solved with the right CSS. Any ideas would be great, thanks!

Link to comment
Share on other sites

o.k. - I see what you're talking about. I'm not 100% sure what the reasoning would be behind setting the body height to a hard coded 1080px because it's creating double scrollbars for me. (one for the body and one for the .timeline_wrap dragscroll div). 

 

You could set the body to 100vh if you're trying to limit some things to the browser window height, but I'd probably wrap the whole thing in some kind of master container rather than trying to set the body height. That's just my two cents worth on that. As I mentioned, I have no experience with or knowledge about that dragscroll script you're using, but I'd recommend using GSAPs Draggable for that type of interactivity. You can just set the drag type to scroll. Please take a look at the example here:

 

https://greensock.com/draggable 

 

You'll also get better performance if you use 'y' instead of 'top' for those animations. Jonathan is much more of an expert in all things CSS related so he may drop by with some more information. 

 

I do see GSAP animating all the values correctly so what you're seeing has nothing to do with GreenSock. I wish I could be of more help, but you just have so much going on there. It would be much easier to figure things out with a reduced demo

 

Happy tweening.

:)

  • Like 3
Link to comment
Share on other sites

Craig, thanks for your help. I wasn't aware of Draggable, and I have been working on implementing that. It has some features that I was wanting anyway, like momentum. I have updated the Codepen with Draggable and tried to delete a bunch of stuff that wasn't applicable to my issue. If you are tired of helping me with this, please just say so :P. 

 

If you scroll with a mouse wheel, the scrolling and parallax works great and is nice and smooth. When I add Draggable to the .timeline_wrap class, it won't scroll on click. Same result if Draggable is added o the body. I have also tried the different drag "types". Some don't do anything, like "scroll" and "scrollTop". If I attach draggable to the body with "type: y", it works, but I lose my parallax. If I attach it to the ".timeline_wrap" with "type: y", it scrolls the page, and the parallax works, but it's no longer smooth. Seems like no matter what I do, I fix one thing, break another. And I apologize, I don't know if this is a Greensock, ScrollMagic, CSS issue, or a combo of all so I keep bugging you about it. Thanks for any ideas!

Link to comment
Share on other sites

Hello @MikeTheVike

  • Is this on Mac that your seeing this no work when you click to scroll?
  • And what browser are you seeing this in?

As a best practice you shouldn't really be binding/attaching  Draggable to the body tag. Think of the body tag as the main container/stage of your project. Doing that will cause buggy issues cross browser. In that case you should just add a container wrapper, like a <div> or <main> element as your main wrapper like Craig advised. And have your children in there.

 

Also you shouldn't be adding a fixed height to the body tag. Instead you can opt for adding a min-height to the html element. But still keep in mind that by doing so might cause issues cross browser since the various modern browsers use the html and body tags to calculate various things. Its ok to set height: 100% on both, but when you start giving them fixed height be prepared for cross browser mayhem ;)

 

  • Like 3
Link to comment
Share on other sites

This is just a curiosity question, but why are you adding a drag feature to the body (or container div)? I would think on desktop most users inclination would be to use the scroll-bar or their mouse wheel and mobile users will flick the window up and down anyway.

 

Again, just curious since regular scrolling is working great and it looks like the draggable portion of your project is causing the only issues right now.

 

Happy tweening.

:)

  • Like 1
Link to comment
Share on other sites

@PointC, I should have mentioned that at the start. This will be displayed on a large touchscreen TV. Users will be able to swipe vertically to move through the "timeline". So we need the drag to work on the whole screen to move the timeline. There will also be popups when tapping on the images that will let users swipe to move through the content on the popup.

 

@Jonathan , I'll keep the draggable off the body, thanks for the info.  Currently the codepen example has it on a div wrapper around everything. It "works", but the parallax animation is not smooth like it is with scrolling with the mouse. I'm using a Mac and viewing it on Chrome.

 

Also, I'm a javascript noob, if you guys know anyone who is a pro at this kind of stuff, we are willing to pay for help. Thanks!

Link to comment
Share on other sites

I'm not 100% certain, but I think the jitter in your demo may be caused by ScrollMagic. We've had a few discussions about ScrollMagic and @OSUblake has shown some techniques for getting the same functionality without that plugin. These threads may be of interest to you:

 

Happy tweening.

:)

  • Like 1
Link to comment
Share on other sites

You  don't need to use Draggable for scrolling with touch monitors. Scrolling should work just like your phone. IE and Edge probably provide the best user experience in this regard, and have a built-in overscrolling effect. 

 

And yes, youMightNotNeedScrollMagicIfYouUseGSAP

 

Really simple. Say you want an animation to start at 2000px for a duration of 500px. This is all you need to do.

 

var tl = new TimelineMax({ paused: true })
  .to(".foo", 500, { x: 100 }, 2000);

// And then in a scroll event handler
function onScroll() {
  tl.time(window.pageYOffset);
}

 

 

 

That's it!

 

 

 

  • Like 4
Link to comment
Share on other sites

Have you registered youMightNotNeedScrollMagicIfYouUseGSAP.com yet Blake? ;)

  • Like 2
Link to comment
Share on other sites

I'll see if I can get it added to this list.

  • Like 2
Link to comment
Share on other sites

@OSUblake We have tested on a touchscreen monitor and it didn't scroll the page. This was on a Mac using Chrome. It treated finger presses just like clicks. Ultimately the final hardware we will use is a Windows machine with Edge browser. It would solve a lot of issues I think if we could scroll with a finger natively without JS. Will have to test on a Windows machine for sure. I'll also give your code a whirl, it would be nice if I could rely on on less JS plugin. Thanks guys, I might be back :)

Link to comment
Share on other sites

Macs really aren't designed for touchscreens. It sounds like it's treating the monitor as basic input device. 

 

But you won't have that problem with Windows, especially if you are using Edge. Edge also uses Pointer Events instead of touch events, which are much better as they combine mouse, stylus/pen, and touch into a single event. Check out this screenshot I just took on a touchscreen. It recognizes all 10 of my fingers and my mouse. 

 

 

xwLlB3O.jpg

 

 

Here's a good site, with a bunch of touch demos to test out.

https://patrickhlauke.github.io/touch/

 

This is the demo I used for that screenshot. See what it shows on your Mac.

https://patrickhlauke.github.io/touch/tracker/multi-touch-tracker-pointer-hud-pep.html

 

 

  • Like 2
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.
×