className

[Deanr1976]

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. 

[Deanr1976]

I've created this in codepen, it seems to happen less here but still does happen.

 

I've edited the class so it shows an background color rather than disabling scrolling so we can see it more clearly -

 

 

See the Pen 6a41cc781396560b3b6e3b941cdd7612 by deanr1976 (@deanr1976) on CodePen.

 

[Deanr1976]

I may have found a solution. 

Something like the following...

 

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

 

[OSUblake]

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");
  }
})

 

[Deanr1976]

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

[OSUblake]

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.

[OSUblake]

Or just set the overflow...

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

 

[Deanr1976]

Brilliant, thank you very much, I appreciate it!

[Deanr1976]

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) 

 

[OSUblake]

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

[Deanr1976]

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.