Jump to content
Search Community

Continous scroll on keyhold

janmd2014 test
Moderator Tag

Go to solution Solved by OSUblake,

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

Hi,

 

Can I use greensock for continuous scroll upon keypress + hold

 

Let say I want a page to scroll continuously arrow key down is pressed and stop when release

 

I also checked the doc and faq section and I can't find instruction how to start using gsap. Do you have documentation on getting started?

 

Thanks

Link to comment
Share on other sites

Hi janmd2014 :)

 

try something like this :

function Loop() {
TweenMax.to(window, 0.5, {scrollTo:{y:"+=20",ease:Linear.easeNone}});
TweenMax.delayedCall(0.5,Loop);   
}
$( ".btn" ).mousedown(function() { Loop() });
$( ".btn" ).mouseup(function() { TweenMax.killDelayedCallsTo(Loop) });

pls check these links too :

 

http://greensock.com/docs/#/HTML5/GSAP/TweenMax/delayedCall/

http://greensock.com/docs/#/HTML5/GSAP/TweenMax/killDelayedCallsTo/

  • Like 2
Link to comment
Share on other sites

Hi Janmd2014,

 

Sorry, you had trouble finding the right materials. For future reference, our tutorials are in the Learning section (see top navigation).

We have an extensive Getting Started Guide and our Jump Start (interactive slideshow of demos) for beginners.

 

However, we have long felt that these resources are not enough.

 

Your timing could not have been any better, as just last night we released a video to show people how to get up and running quickly! The video is fast-paced and hits on all the info you need to know starting out.

 

Take a look here: http://greensock.com/get-started-js

 

If you have any feedback on the video, or other topics you would like covered, please let us know.

 

Happy Tweening!

 

- Carl

  • Like 2
Link to comment
Share on other sites

 

Hi janmd2014  :)

 

try something like this :

function Loop() {
TweenMax.to(window, 0.5, {scrollTo:{y:"+=20",ease:Linear.easeNone}});
TweenMax.delayedCall(0.5,Loop);   
}
$( ".btn" ).mousedown(function() { Loop() });
$( ".btn" ).mouseup(function() { TweenMax.killDelayedCallsTo(Loop) });

pls check these links too :

 

http://greensock.com/docs/#/HTML5/GSAP/TweenMax/delayedCall/

http://greensock.com/docs/#/HTML5/GSAP/TweenMax/killDelayedCallsTo/

 

 

Is it possible to put variables inside scrollto?

 

TweenMax.to(window, 0.5, {scrollTo:{y:"+=VariableSpeed",ease:Linear.easeNone}});

 

Thanks

Link to comment
Share on other sites

Hi Janmd2014,

 

Sorry, you had trouble finding the right materials. For future reference, our tutorials are in the Learning section (see top navigation).

We have an extensive Getting Started Guide and our Jump Start (interactive slideshow of demos) for beginners.

 

However, we have long felt that these resources are not enough.

 

Your timing could not have been any better, as just last night we released a video to show people how to get up and running quickly! The video is fast-paced and hits on all the info you need to know starting out.

 

Take a look here: http://greensock.com/get-started-js

 

If you have any feedback on the video, or other topics you would like covered, please let us know.

 

Happy Tweening!

 

- Carl

 

Thanks! and sorry for missing the menu on the topmost. I was focussing on the Support menu. I was expecting every docs/tutorials would be there and I concluded there isn't getting started docs when i did not saw it there.

 

Thanks

Link to comment
Share on other sites

yep , try this :

var myVar = 50 ; // you can define negative value like -50
function Loop() {
TweenMax.to(window, 0.5, {scrollTo:{ y:"+="+myVar , ease:Linear.easeNone }});
TweenMax.delayedCall(0.5,Loop);   
}
$( ".btn" ).mousedown(function() { Loop() });
$( ".btn" ).mouseup(function() { TweenMax.killDelayedCallsTo(Loop) });
  • Like 1
Link to comment
Share on other sites

Hi Janmd2014,

 

A delayed call might result in some jumping, so here's another way to go about this. Create a tween when a key is first pressed, and set its time based on its scroll position. While the key is being held down, ignore any more calls to create the tween. When the key is released, kill the tween. You can even add in some easing for acceleration. The longer you hold the key down, the faster it will scroll.

 

Use the UP and DOWN keys to auto scroll

http://plnkr.co/edit/TAmtkT?p=preview

 

EDIT: I removed the Polymer scripts that were causing it not to work in Firefox and IE.

 

CodePen URL: 

See the Pen emEajW by osublake (@osublake) on CodePen

  • Like 1
Link to comment
Share on other sites

Hmmm , if you don't like to use delayedCall , you can try something like this :

var T=1 , SCT , SCS , DU=DD=DO= 2 ; // 2 = Scroll Duration
//////////////////////////////////// btn & keyboard setup        
$("#down").mousedown(function() { Down(); });
$("#up").mousedown(function() { Up(); });
$("#down,#up").mouseup(function() { Stop(); });
$(window).keydown(function( event ) {
  if ( event.which == 40 ) { event.preventDefault();   Down(); } 
  else if ( event.which == 38 ) { event.preventDefault();   Up(); }
});
$(window).keyup(function() { Stop(); });
////////////////////////////////////
function Up(){
  TweenMax.killTweensOf(SCT);
  if(T){  SCT = TweenMax.to(window,DD,{scrollTo:0,ease:Linear.easeNone}); T=0;  }
};
function Down(){
  TweenMax.killTweensOf(SCT);
  if(T){  SCT = TweenMax.to(window,DU,{scrollTo:'max',ease:Linear.easeNone}); T=0;  }
};
function Stop(){
  SCS = TweenLite.to(SCT,0.3,{timeScale:0,onComplete:function(){ SCT.pause(); Scalc(); T=1; }}) 
};
function Scalc(){
var ST = $(window).scrollTop();
var DH = $(document).height();
var WH = $(window).height();
var scrollPercent = (ST)/(DH-WH);
DD  = DO-(DO*(1-scrollPercent));
DU  = DO-(DO*(scrollPercent)); 
};
 

pls check this out : 

See the Pen NPvZxR by MAW (@MAW) on CodePen

  • Like 1
Link to comment
Share on other sites

Nice! That works much better than the delayed call. Love the background too.

 

See if you can figure out my easeInOut problem. It works fine when you scroll a long distance, but if you're near the top and press up, or near the bottom and press down, it scrolls too fast. I need to figure out some sort of ratio to slow it down based on distance.

Link to comment
Share on other sites

@OSUblake @Diaco.AW

 

Thanks both for your help.

 

So far I am satisfied with what I came up with. I am not an advance coder. Your codes seems out of my league but I would really like to try it sometime.

 

One question though.

 

Here is what I get so far.

http://demo.starpixel.net/gsock/

 

It can be scroll by up and down. Ctrl+up or down for faster scroll, and number pad with different speed depending on which number is pressed. Number pad scroll direction is based on the last direction made by arrow keys.

 

So far this is smoother than my current version which is the one I intend to replace with gsock animation. Here is the jquery (current) version

http://prompter.rareapps.org/prompter.php?p=123

 

As you can see, gsock is much smoother but it is still having the jaggy part sometimes. Perhaps due to the delayCall

 

Here is my gsock code

function LoopUp() {
	TweenMax.to(window, 0.7, {scrollTo:{y:"+=20",ease:Linear.easeNone}});
	TweenMax.delayedCall(0.2,LoopUp);   
}

On both of your code however, It is hard to tell if it smooth or not because of the speed.

 

If you both have time I want to see if my current version can still be improved using your code or it is the smoothest I can achieve. Perhaps you can change your sample using the same scenario as what I have just for comparative and educational purpose.

 

I am happy with my current gsock version. Thanks to both of you.

 

Kudos

Link to comment
Share on other sites

  • Solution

Hi Janmd,

 

Our examples are doing the same thing, the only real difference is Diaco's example is listening for mouse events, which fire once. In my example, I'm listening for keydown events which constantly fire, so I added in some basic logic to prevent it from recreating a new animation every time it fires. 

 

jQuery is not needed for anything related to GSAP. We only used it to find the document height, window height, window scrollTop, and mouse/keyboard events. Nothing special. 

 

Here's another version that you can play around with to make a comparison. Instead of using some arbitrary total/scroll time value, you can enter a speed value for how many pixels you want it to scroll per second. I also added in a timeScale value, which will increase the speed when you press or release the CTRL button. Using timeScale would be a good way to create the different speeds for you num pad buttons.

 

See the Pen myMNNL by osublake (@osublake) on CodePen

  • Like 1
Link to comment
Share on other sites

WOW!

 

That is amazing. I will surely migrate my jQuery version to that if I have time. That is amazingly smooth scroll! Even from the speed of 50, the pixels are moving in elegantly smooth tween. Great great great!

 

Are you deleting your samples in codepen? I would love to come back on that some other time.

 

Really.. that is amazingly smooth!

 

Great!

Link to comment
Share on other sites

  • 2 weeks later...

Hi @OSUblake,

 

I'm trying to implement your pen on my site but I get 200 errors on twinmax

 

http://prompter.rareapps.org/wp-content/themes/child-theme/prompter2.php

 

Error: Uncaught TypeError: Failed to execute 'scrollTo' on 'Window': 2 arguments required, but only 0 present.

 

I use this to include greensock

 

<!--CDN link for the latest TweenMax-->
 
What did I missed?
 
thanks
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...