Jump to content
Search Community

kreendurron

Members

  • Posts

    14

  • Joined

  • Last visited

 Content Type 

Posts posted by kreendurron

    Disable Mousewheel Events Durring A Tween

    in GSAP

    Posted

    I’m working on a site that has full height sections. It is laid out as one big page with a few sections.

    The user has two options to navigate the site:

    They can use the mouse wheel to go back and forth to the next/previous “section”.

    They can quickly tween to which ever section they choose via the standard off-canvas menu on the side.

     

    Codpen Here:

     

    The problem I'm having is that if you scroll the wheel quickly multiple mouse wheel events fire before the animation can complete its tween. This interferes with the next sections animations.

    You can see this in the console as shown in the attached screenshot.

     

    I hope someone can point me in the right direction as to how I can temporarily disable the mouse wheel until the entire animation has played out and is ready to accept another scroll wheel event.

     

    Thanks,

    Nicholas Brown

    post-50676-0-42385100-1487886961_thumb.jpg

    See the Pen ryBrLY by kreendurron (@kreendurron) on CodePen

    create one page site

    in GSAP

    Posted

     

    I believe this is the answer you are looking for:

    See the Pen ryBrLY by kreendurron (@kreendurron) on CodePen

     

    I didn't have time to actually implement the timeline animations when you scroll, but the code is there for you to just fill in the functions. Hopefully it's commented well enough..

     

     

    I found time and finished it... haha. It's working now. If you hover over the div sections and use the scrollwheel it will animate to the next/previous sections etc.

     

    Thanks,

     

    Nick Brown

    • Like 1

    create one page site

    in GSAP

    Posted

    thanks ... 

    but i want only scroll to part of this site

    i want use scrollto plugin whene mousewheel scroll appear , display window scroll section by section ... 

    i have many section and does not have certain class or id , because section create dynamically ...

    how can use scrollto plugin for scroll amount of window height in each mousewheel scroll??

     

    thanks??

     

     

    I believe this is the answer you are looking for:

    See the Pen ryBrLY by kreendurron (@kreendurron) on CodePen

     

    I didn't have time to actually implement the timeline animations when you scroll, but the code is there for you to just fill in the functions. Hopefully it's commented well enough..

     

    // TWEEN ON SCROLL WHEEL EVENT
$('#box1').on('DOMMouseScroll mousewheel', function (e) {
  if(e.originalEvent.detail > 0 || e.originalEvent.wheelDelta < 0) { //alternative options for wheelData: wheelDeltaX & wheelDeltaY
    //scroll down to box#2
    console.log('Down to box#2');
  } else {
    //scroll up log
    console.log('nothing to scroll Up to....');
  }
  //prevent page fom natively scrolling
  return false;
});

    It basically fires a function based on the direction of your scroll while hovering over whatever element you attach it to.

    I just have it logging to console right now. So open your divtools and look in the console.

     

    This should work on all browsers.

     

    Hope that helps!

     

    Thanks,

    Nick Brown

    Button That Scrolls to an anchor

    in GSAP

    Posted

    Thanks PointC,

     

    I'll work on creating a codepen.

     

    I ultimately want to get away from using the jquery.scrolly.js and make the move to just using GSAP.

     

    I think what i'm needing to know may be in the codepen you posted above about clicking a button and scrolling to a div.

    Unfortunately when i follow the link to the codepen you provided it says the page doesn't exist?

     

    Can you try again?

    Thanks.

    Button That Scrolls to an anchor

    in GSAP

    Posted

    Link: http://higherskies.com/v2.1/

     

    First time submitting to the forums.

    Real quick want to say I'm loving GSAP.

     

    If you follow the link provided, the page loads and I have a timeline controlled welcome text and continue button animate onto the screen.

     

    What I'm trying to achieve is when I click the continue button it will then scroll to the next section of the page, the "Who We Are" section...

    In my sidebar when I click on "Who We Are" button it smoothly scrolls to the appropriate Anchor tag.

     

    How can I get the same result with the timeline function: continueBtn()

     

    here is my timeline code:

    <script>
	var introText = document.getElementById("introText");
	var introBtn = document.getElementById("introBtn");
	var welcomeText = document.getElementById("welcomeText");
	var logo = document.getElementById('logoBtn');
	var welcomeBtn = document.getElementById('welcomeBtn');
	var whoWeAreBtn = document.getElementById('whoWeAreBtn');
	var servicesBtn = document.getElementById('servicesBtn');
	var contactBtn = document.getElementById('contactBtn');
			
		
	var t1 = new TimelineLite();			
		t1.staggerFrom([introText,logo,welcomeBtn,whoWeAreBtn,servicesBtn,contactBtn],0.25,{
		x:950,
		opacity:0,
		ease: Expo.easeOut,delay:1},.25
		);
		
		t1.to(welcomeText,.02,{transformPerspective:800});
		t1.to(welcomeText,1,{transformPerspective:800,rotationY:20,ease: Bounce.easeOut});
			
		t1.from(introBtn,.75,{
		rotationX:-90,
		transformOrigin:"left top",
		ease: Bounce.easeOut}
		);
			
		function welcomeTextHover() {
			t1.to(welcomeText,.75,{rotationY:0,overwrite:"all"});
		}
		
		function welcomeTextHoverOut() {
			t1.to(welcomeText,.75,{rotationY:20,overwrite:"all"});
		}
		
		function continueBtn() {
			t1.to(introBtn,.25,{
			x:-900,
			ease: Expo.easeOut}
			);
			t1.to(introText,.25,{
			x:900,
			autoAlpha:0,
			ease: Expo.easeOut}
			);
	                // wait for animations to play out then scroll to next section.
		}
		
	</script>

    Thanks for any help you can offer. I hope I was descriptive enough.

     

    ~Nick

×
×
  • Create New...