Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Deanr1976

className

Recommended Posts

Anybody have an issue with className?

 

I use className to add a class to stop the main page from scrolling when a window(modal) is in view.

Sometimes it is removed on timeline reversal. Sometimes it doesn't remove.

 

When it doesn't remove it leaves the main page un-scrollable. 

 

I've got 3 sites in production at the moment and this happens on all of them. 

Link to post
Share on other sites

I may have found a solution. 

Something like the following...

 

.set($html, {className:"-=noscroll"},0) 
.set($html, {className:"+=noscroll"},0.01) 

 

Link to post
Share on other sites

Hi @Deanr1976

 

It's hard to reproduce, so it might be some type of timing issue, but I do see what you're talking about. Probably something that will need to be investigated by @GreenSock.

 

How do you prevent the page from scrolling? And are you only using className to add and remove class names? If you're not animating the classes, you can do this as a workaround.

var tl = new TimelineMax({
  onStart: function() {
    $html.addClass("noscroll");
  },
  onReverseComplete: function() {
    $html.removeClass("noscroll");
  }
})

 

  • Like 1
Link to post
Share on other sites

Thanks for that @OSUblake, I'm using overflow: hidden on html. I'm doing this on both pre-loaders and menu windows/modals so it makes sense to tie it in with the animation

Link to post
Share on other sites

What I did will make it part of the animation. It will be the first thing that happens when you play your animation, and the last thing that happens when reversed.

 

You could also do something like this.

tl.add(function() {
  $html.toggleClass("noscroll");
}, 0)

 

Doing 2 sets like that just looks odd. But if it works, it should be ok as temp workaround. Bugs get fixed really fast.

  • Like 1
Link to post
Share on other sites

Or just set the overflow...

tl.set($html, { overflow: "hidden" }, 0)

 

  • Like 1
Link to post
Share on other sites

Feedback on using... 

tl.set($html, { overflow: "hidden" }, 0)

 

Just like className it sometimes leaves the html with the style overflow:hidden applied to it. The only solution that seems to work every time is the one mentioned earlier which is...

.set($html, {className:"-=noscroll"},0) 
.set($html, {className:"+=noscroll"},0.01) 

 

Link to post
Share on other sites

That's strange. Can you make another demo that makes it is easier to reproduce the problem with? 

Link to post
Share on other sites

I'm using this with wordpress. I'll set up a site especially for this so we can see it through the developer tools. It does happen in codepen but not as often. 

Link to post
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.

×