Jump to content
Search Community

Horizontal scrolling website

Stefdv 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

Hello, i noticed that most people are talking about a vertical scrolling website with animations.( Like SuperScrollorama ). I need a Horizontal scrolling website, where animations take place while you scroll to the right at certain points.

 

I can't figure out how to link the scrollbar position to a value i can use to trigger tweens.

Link to comment
Share on other sites

Hi and Welcome to the GreenSock forums.

 

it appears SuperScrollorama can work horizontally like so:

var scrollyStuff = $.superscrollorama({isVertical:false});

http://stackoverflow.com/questions/12164572/does-scrollorama-work-horizontally

 

 

If you want to configure your own solution with TweenMax tweens, they have a progress() value which is a value between 0 and 1. Once you convert your horizontal scroll position to a value between 0 and 1, you can pass it into your tween's progress() method. Note for more robust sequences, use TimelineMax's progress().

 

something like:

 

var tween = TweenMax.to( someElement, 1, {css:{rotation:360}, paused:true});
var scrollPos = //whatever you do to calculate your value, jQuery.scrollLeft() would be a good starting point
tween.progress( scrollPos );

 

Obviously though SuperScrollorama is custom built to take care of a ton of features. I'd suggest viewing the sample files on github and tweaking them a bit: https://github.com/johnpolacek/superscrollorama/blob/master/simpledemo.html

 

John Polacek, the author, peaks his head in here every once in a while. You may want to try contacting him if you have any detailed questions relating to SuperScrollorama.

  • Like 1
Link to comment
Share on other sites

Thank u for your reply,

 

as a beginner in javascript, i didn''t know about the scrolleft option, so that's a good starting point. I didn't want to jump into superscrollorama because i thought that the learning curve would be to high, and i'm used to work with greensock in as3. But i will give it a try.

Link to comment
Share on other sites

Hi Stef,

 

Maybe this could help a little, it's not the complete job but it could help you for a start.

 

Just like Carl said, in JQuery with scrollLeft you can get (and set if you want) the horizontal scroll position of any element, including window; and the scroll event is going to helpp you trigger a handler that is going to give you the current left position, pretty much like this:

 

$(window).scroll(function()
{
var position = $(this).scrollLeft();
$("div#log1").html(position);
});

 

So any time you scroll in the horizontal the variable position is going to get the horizontal scroll value so you can use it.

 

And with some simple math you can get the position and transform it into something usefull by creating a number that goes between 0 and 1 so you can set the progress of your tween. Something like this:

 

$(window).scroll(function()
{
var position = $(this).scrollLeft();
var start = 400;
var end = 800;
var progress = (1 / (end - start)) * (posicion  - start));
if(posicion >= start && posicion <= end)
{
	$("div#log1").html(posicion);
	$("div#log2").html(progress);
}
});

 

You can see it working here.

 

Hope i can help a little.

Good luck and cheers,

Rodrigo.

  • Like 1
Link to comment
Share on other sites

Well, first of all...great that you reply to a beginners question :-P

 

I see what your doing..but i don't understand what the 'between 0 and 1 ' is doing in your var progress...1 / ( end - start ) . Where does the '1' comes from ?

 

i did look at your example rodrigo..but i like to understand stuff ..not just copy it and implement...

Link to comment
Share on other sites

Well, first of all...great that you reply to a beginners question :-P

 

No problemo my friend, here to help ;).

 

I see what your doing..but i don't understand what the 'between 0 and 1 ' is doing in your var progress...1 / ( end - start ) . Where does the '1' comes from ?

 

There are two public method called "progress" and "totalProgress" for both TweenMax and TimelineMax; i'll just quote some of the api reference:

 

progress(value:Number):*

Gets or sets the tween's progress which is a value between 0 and 1 indicating the position of the virtual playhead (excluding repeats) where 0 is at the beginning, 0.5 is halfway complete, and 1 is complete.

Take a good look at the documentation in the site here

 

You have to consider at which point the tween will begin and at which point it will end, therefore those two points are key to set the progress of your tween. In terms of the mathematical expression itself it goes a little like this: you need a number that is linked to the actual position in the X axis which you get from the scrollLeft method. Since you want your tween to begin at certain point when the user scrolls, you need a 0 at that point (remember the API?) and your tween is going to extend from that point to an end point where the tween is over even if the user keeps scrolling, right?. Since you need to tell TweenMax to set the progress with a number between 0 and 1, you have to divide 1 by the amount of pixels that your tween is going to last and then multiply that by the current position relative to the start point.

 

i did look at your example rodrigo..but i like to understand stuff ..not just copy it and implement...

 

That's great, like i said take a look at the docs here and to the JQuery API in order to understand a little more. Any way you caught me a little short of time in order to explain a little more, but i will try to get something in the next days in order to clarify a little more this subject.

 

Cheers and Good luck!!!

Rodrigo.

Link to comment
Share on other sites

Hi Stef,

 

You are most welcome, anyway i have something else to clarify this point a little more.

 

Let's go to the expression breakdown:

 

progress = (1 / (end - start)) * (position - start)

 

horscroll.jpg

 

First part

Let's say that your tween starts when the scroll bar is 100 px from the left edge of the screen, and ends when the scroll bar reaches the right edge. Asume that this position is at 2100 px. So in a very simple term your tween is going to extend for 2000 pixels, is like saying that is going to last let's say 10 seconds. So considering thath almost every programming language uses miliseconds your tween will last 10000 miliseconds, and each milisecond can be considered a progress or update unit of your tween. In the case of updating your tween with the scroll you have to consider each pixel that is scrolled a progress or update unit.

 

Since the progress of the tween has to be set in base of a number that goes between 0 and 1 you have to divide the total progress of your tween -that's 1- between the total progress or update units, in this case pixels. Since our tween is going to last 2000 pixels you have to divide 1 between 2000. And that's how you get the single progress or update unit.

 

(1 / (2100 - 100)) ==>progress unit ( 0,0005 )

 

horscroll2.jpg

 

Second Part

Now your tween is progressing as the user scrolls to the right of the screen and reversing as the user scrolls to the left, right? We have the total amount of pixels on which the tween extends and now we need to know where the scroll bar is right now so we can tell the tween "hey buddy, you have to be here now". For that we need the actual position of the scroll bar. Since the $(window).scroll() function triggers every time the window moves we can ask for the scroll bar position.

 

Let's say that the scroll bar is actually at 1200 pixels. Since our tween started at 100 pixels, this means that our tween has progressed 1100 pixels, so we can obtain this number like this:

 

(position - start) ==>actual position ( 1100 )

 

Summarizing

 

progress = (1 / (end - start)) * (position - start)

 

At the beginning of time this is quite simple:

 

progress = (1 / (2100 - 100)) * (0 - 100) = (0,0005) * (-100) = -0,05

This is smaller than 0 therefore our tween goes nowhere.

 

progress = (1 / (2100 - 100)) * (100 - 100) = (0,0005) * (0) = 0

Our tween is at the very beginning nothing happens, yet...

 

progress = (1 / (2100 - 100)) * (1200 - 100) = (0,0005) * (1100) = 0,55

Our tween is a little past the half point.

 

I hope this helps a little more.

Cheers,

Rodrigo.

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