Jump to content
Search Community

className

Deanr1976 test
Moderator Tag

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

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