Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
vvlestat

AutoScroll script needed PLS.

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 guys,

 

I need your help for a project of mine.

 

Please check this website - http://suggestopediabg.com/presentation/. We use greensock here and you have to scroll to see the whole action. But many users may not understand what to do, so I need an autoscroll instead of manual user scroll. Is that achievable and if yes could you please provide me with a code.

 

Thank you very much!

Link to comment
Share on other sites

From what I can tell, you already have 'automatic' scrolling set up on your navigation buttons so it shouldn't be a big step to automate this further.

 

My suggestion for sequencing your page is to create a timeline that contains all of the scrolling tweens necessary to get from the top to bottom, and play that when the user isn't intereracting.

 

e.g.

// creates a timeline of 1 second 'move to next section' tweens,
// with 5 second gaps between them
var tl = new TimelineMax({ paused:true });

tl.append("section1"); // now at section 1

tl.to(window, 1, { scrollTo:{ y:section2Y }, onComplete:function() {
   // set active buttons etc
} }, 5);
tl.append("section2"); // now at section 2

tl.to(window, 1, { scrollTo:{ y:section3Y } ....... }, 5);
tl.append("section3"); // now at section 3

tl.to(window, 1, { scrollTo:{ y:section4Y } ....... }, 5);
tl.append("section4"); // now at section 4


// use the labels to jump between different sections, by tweening
// tl's time e.g. to go to section3
TweenLite.to(tl, 1, { time:tl.getLabelTime("section3") });


// do something to determine if the user is idle, or just use a
// 'play' button, and take scrolling control from them
function startAutoScrolling() {
   tl.play();
}

  • Like 1
Link to comment
Share on other sites

I think I figured it out. The first number is the speed. Please correct me if I'm wrong

 

Thanks!

Link to comment
Share on other sites

In a GSAP Tween? yes:

TweenMax.to(target, duration, vars); // duration in seconds

Link to comment
Share on other sites

Thanks a lot. Last thing if I may.

 

This is what I placed as code after the page is loaded and just before the first slide starts (london slide)

 

 

TweenLite.to(window, 55, {scrollTo:{y:32000}});

}

 

this.setupSection1 = function () {

var pinAnimations = new TimelineLite();

var animDuration = 3500;

 

$('#section-1 > div.background-color:eq(0), #section-1 > ul.texts:eq(0)').css({

display: 'block',

opacity: 0

});

 

pinAnimations

.append(TweenMax.to($('#section-1 > div.background-color:eq(0)'), .5, {css:{

opacity: 1

 

..............................

 

But now if you touch the mouse scroll it goes manual, but it takes forever to scroll, as it looks like it gets the predefined values 55 seconds for 32000 pixels. Can I avoid that and if you touch your scroll to switch to its default settings (3500 ms duration)

 

Cheers!

Link to comment
Share on other sites

This should get you started on the right track

// save a reference to that automatic scroll tween
window.fullWindowScroll = TweenLite.to(window, 55, {scrollTo:{y:32000}});
window.fullWindowScrollTimeOut;

window.onscroll = function(e) {
   fullWindowScroll.pause();
   fullWindowScrollTimeOut = setTimeout(function(){
    fullWindowScroll.play();
   }, 3500);
}

Link to comment
Share on other sites

Thanks Jamie, but it stops just after it starts. What I did is just replace the code and now it looks like that:

 

 

// save a reference to that automatic scroll tween

window.fullWindowScroll = TweenLite.to(window, 55, {scrollTo:{y:32000}});

window.fullWindowScrollTimeOut;

 

window.onscroll = function(e) {

fullWindowScroll.pause();

fullWindowScrollTimeOut = setTimeout(function(){

fullWindowScroll.play();

}, 3500);

}

}

 

this.setupSection1 = function () {

var pinAnimations = new TimelineLite();

var animDuration = 3500;

 

$('#section-1 > div.background-color:eq(0), #section-1 > ul.texts:eq(0)').css({

display: 'block',

opacity: 0

});

 

 

Here is the test site - http://server1.glide...r.com/paralax2/

Link to comment
Share on other sites

Oh right, I suppose the tween must be triggering the onscroll event? I guess you need a way to detect a manual scroll versus a tweened scroll... I have a feeling this issue has been tackled on the forum before though so I suggest trying a search for scroll or scrollTo in the javascript section of the forum.

Link to comment
Share on other sites

Got it! Thanks a lot guys.

 

For future references this is what I just added:

 

TweenLite.to(window, 55, {scrollTo:{y:32000, autoKill:true}});

  • Like 1
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.
×