Jump to content
Search Community

Tweenmax script interfering with bootstrap 3 modal

ve1jdramas 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

Ok I am using bootstrap 3, and the modal feature for my portfolio. I have it set up fine and everything works, but when I add my smooth scrolling javascript the mouse wheels scrolls in the background when you have the modal opened.

 

I used this tutorial. Which helped me get smooth scrolling working with TweenMax and ScrollToPlugin. 

 

Here is my js for the smooth scrolling:

$(function(){ 

var $window = $(window);
var scrollTime = 1.2;
var scrollDistance = 170;

$window.on("mousewheel DOMMouseScroll", function(event){

event.preventDefault(); 

var delta = event.originalEvent.wheelDelta/120 || -event.originalEvent.detail/3;
var scrollTop = $window.scrollTop();
var finalScroll = scrollTop - parseInt(delta*scrollDistance);

TweenMax.to($window, scrollTime, {
scrollTo : { y: finalScroll, autoKill:true },
ease: Power1.easeOut,
overwrite: 5 
});

});
});

You can see my site without the above javascript here: Correct modal scrolling

 

With the above javascript: Error modal scrolling

 

jsfiddle, for some reason the remote content does not display in the modal (on localhost as well) so you cant see it scroll, but you can play with the js here.

 

I attempted to make a jsfiddle but the way I am displaying the contents in the modal doesn't work in jsfiddle for some reason (this was mentioned after I did some research) anyway just scroll to the 3rd section (portfolio) and click an image to see what I am talking about. My modal code is just the stock bootstrap moal and I also tried this with bootbox.js and the same issue happened, so I don't think that is the issue.

 

I have been trying to figure this out for a week now with no success if someone could take a look would be greatly appreciated.

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums.

 

One possibility could be that Chrysto's code works on the window element, so when you click on an element that makes a modal element appear, the wheel event handler is still binded to the window element, thus scrolling the window and not the modal.

 

What you could do is store that particular tween in a variable and when a modal element is opened you can kill that tween and when the modal element is closed you can create it again by calling a public function:

var scrollTween;

function createScrollTween()
{

  scrollTween = TweenMax.to($window, scrollTime, {
    scrollTo : { y: finalScroll, autoKill:true },
    ease: Power1.easeOut,
    overwrite: 5 
  });
}

openElement.on("click", function(e)
{
  //code to open modal
  scrollTween.kill();
});

closeElement.on("click", function(e)
{
  // code to close modal
  createScrollTween();
});

Another option could be to bind and unbind the mouse wheel event to the window element when the user open/close a modal element but that would be a little more cumbersome.

 

Rodrigo.

  • Like 2
Link to comment
Share on other sites

Hey from Las Vegas Rodrigo! Thanks for the warm welcome!

 

Ok so I am trying to get your solution to work but I think my ,js is a little off again (I'm like a week days into javascript) it looks correct to me as per the getbootstrap.com docs.

 

Check out this updated .js:

$(function(){


var $window = $(window); //Window object
var scrollTime = 1.2; //Scroll time
var scrollDistance = 320; //Distance. Use smaller value for shorter scroll and greater value for longer scroll


$window.on("mousewheel DOMMouseScroll", function(event){


event.preventDefault(); 


var delta = event.originalEvent.wheelDelta/120 || -event.originalEvent.detail/3;
var scrollTop = $window.scrollTop();
var finalScroll = scrollTop - parseInt(delta*scrollDistance);


var scrollTween;


function createScrollTween()
{


   scrollTween = TweenMax.to($window, scrollTime, {
   scrollTo : { y: finalScroll, autoKill:true },
   ease: Power1.easeOut,
   overwrite: 5 
 });
}


openElement.on("click", function(e)
{
 //code to open modal
 $('#myModal').modal('show');
});


closeElement.on("click", function(e)
{
 // code to close modal
$('#myModal').modal('hide');
});


});


});
 
What I am I missing here?
Link to comment
Share on other sites

Hi,

 

You're missing killing and creating the tween instance:

var $window = $(window); //Window object
var scrollTime = 1.2; //Scroll time
var scrollDistance = 320; //Distance. Use smaller value for shorter scroll and greater value for longer scroll


$window.on("mousewheel DOMMouseScroll", function(event){


event.preventDefault(); 


var delta = event.originalEvent.wheelDelta/120 || -event.originalEvent.detail/3;
var scrollTop = $window.scrollTop();
var finalScroll = scrollTop - parseInt(delta*scrollDistance);


var scrollTween;


function createScrollTween()
{


   scrollTween = TweenMax.to($window, scrollTime, {
   scrollTo : { y: finalScroll, autoKill:true },
   ease: Power1.easeOut,
   overwrite: 5 
 });
}


openElement.on("click", function(e)
{
 //code to open modal
 $('#myModal').modal('show');
 
 // kill the tween.
 scrollTween.kill();
});


closeElement.on("click", function(e)
{
 // code to close modal
 $('#myModal').modal('hide');
 
 // create the tween again.
 createScrollTween();
});

});

That should do it. Try it and let us know how it goes.

 

Rodrigo.

Link to comment
Share on other sites

Ok so I gave that shot but I had no success, there is no error in console as well. Smooth scrolling is just not working, you can check it out here. I even tried copying your code 100% still didn't work 

 

I thought the difference might be between "createScrollTween();" and "scrollTween.kill();" but that was not it. Any other ideas on what it might be?

Link to comment
Share on other sites

Hi,

 

I don't see any file with the GSAP code. Maybe that's why is not working.

 

Also why don't you use the scrollTo Plugin for the menu events instead of jQuery animate(). Is like having a Ferrari parked in your house and going to a race in an electric city-car :)

 

Please let us know the url of the file with the GSAP code in order to take a look.

 

Rodrigo.

  • Like 1
Link to comment
Share on other sites

I have the 2 files needed for the smooth scrolling included in the bottom of my index.html, with all my other JS, those 2 files are:

<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/ScrollToPlugin.min.js"></script>

And the smooth scroll worked before I tried your solution, but maybe I am using an outdated version of GSAP?

 

And as far as the scrollTo for the menu I figured that would we the better way to do it, its a little intimidating though for my first week of JS. I plan to try it after I get this sorted though. I really appreciate you helping out though first place someone has actually tried to help me! I'm glad to be here.

 

UPDATE: I realized I didn't include my .js for the smooth scrolling in my index.html from my last edit, added it in but this did not fix it. The page does not scroll with the mouse wheel at all now. Also added jsfiddle in my main post but its not much help.

Link to comment
Share on other sites

I recommend you check out how to use browser developer tools to debug your pages

 

Chrome

Firefox (or Firebug addon)

Internet Explorer

 

If you open the Console, you'll see that every time you try to scroll with the mousewheel there is a clear error that openElement is not defined. You'll need to:

 

1) make sure that openElement is defined somewhere (and closeElement)

2) move the .on('click') stuff outside of your scroll handler. You want to attach these events once, not at every single step of the mousewheel. Your scroll handler should look more like this:

var scrollTween, finalScroll;
$window.on("mousewheel DOMMouseScroll", function(event){
  event.preventDefault(); 
  var delta = event.originalEvent.wheelDelta/120 || -event.originalEvent.detail/3;
  var scrollTop = $window.scrollTop();
  finalScroll = scrollTop - parseInt(delta*scrollDistance);
  createScrollTween();
});
  • Like 2
Link to comment
Share on other sites

@jamiejefferson ah ok the chrome link was pretty helpful, I know how to use the developer tools for HTML & CSS but the console was a little unfamiliar to me so that was pretty helpful!

 

But I am having trouble understanding the solution. For step 1 I don't understand what I am suppose to define openElement and closeElement as.

 

And for step 2 so I will not be using a function anymore?

 

Here is what I have so far: 

$(function(){


var $window = $(window); //Window object


var scrollTime = 1.2; //Scroll time
var scrollDistance = 320; //Distance. Use smaller value for shorter scroll and greater value for longer scroll


$window.on("mousewheel DOMMouseScroll", function(event){


event.preventDefault(); 


var delta = event.originalEvent.wheelDelta/120 || -event.originalEvent.detail/3;
var scrollTop = $window.scrollTop();
var finalScroll = scrollTop - parseInt(delta*scrollDistance);


var scrollTween, finalScroll;


$window.on("mousewheel DOMMouseScroll", function(event){
 event.preventDefault(); 
 var delta = event.originalEvent.wheelDelta/120 || -event.originalEvent.detail/3;
 var scrollTop = $window.scrollTop();
 finalScroll = scrollTop - parseInt(delta*scrollDistance);
 createScrollTween();
});


var openElement = ;
var closeElement = ;


openElement.on("click", function(e)
{
//code to open modal
$('#myModal').modal('show');


// kill the tween.
scrollTween.kill();
});


closeElement.on("click", function(e)
{
// code to close modal
$('#myModal').modal('hide');


// create the tween again.
createScrollTween();
});


});


});

Thanks for the response!

Link to comment
Share on other sites

I am assuming openElement / closeElement is whatever opens / closes your modal window. Select it with jQuery so that .on() can work

var openElement = $('#id_of_some_element_that_opens_a_modal_popup');

Step 2 was just a suggestion about moving the creation of click handlers outside of the scroll function. It seems like you just copied what I suggested and pasted it in the middle of your code but it was meant to be a modification, and after it you would include whatever code you need to create click handlers etc.

 

I've updated the fiddle with a different idea of disabling the scrolling when the modal opens (without needing to kill/restart anything). When a bootstrap modal opens, the class modal-open is added to the body so you can just check against that http://jsfiddle.net/q5BAj/2/

 

-------------------

As an aside about this 'smoothscroll' - It's an interesting idea, but it takes away the precise control a mousewheel gives you to scroll at your own pace, and I hate it absolutely. It would prompt me to close your site immediately if I encountered this in the wild. Browsers already implement smooth scrolling, and changing how this works seems entirely against your claim of usable UI. As an internet user, I'd ask you reconsider whether you really should be overriding mousewheel scrolling here.

  • Like 3
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...