Jump to content
Search Community

Parallax scrolling sections

qarlo 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

Hello,

I'm trying to create a page with sections moving in parallax. Each section will have an image. Some of these images will scroll normally, while for some I'd like a different movement, like scrolling slowly in the opposite direction. Basically I'd like to recreate the effect in this page: https://www.squarespace.com/websites/templates/mercer (you have to click on "PREVIEW MERCER" to see it).

 

I set up a pen with three sections: the first and the last one should move normally, while the second one is the parallax one. The main problem is that I'd like to translate the element while scrolling and, of course, when scrolling back, animating it back to its original position.

 

I know that ScrollMagic can be useful in this case, but I'd prefer doing it using only gsap.

Any suggestion?

See the Pen JKxzvW by qarlo (@qarlo) on CodePen

Link to comment
Share on other sites

Hello qarlo, and Welcome to the GreenSock Forum!

 

You can check out this

 

See the Pen jPmRWV by bassta (@bassta) on CodePen

 

But basically for more complex parallax scrolling,  ScrollMagic is the best option since it is a scrolling manager for complex scene parallax scrolling management.

 

Under the hood ScrollMagic uses GSAP as its animation platform.

 

:)

  • Like 3
Link to comment
Share on other sites

You can check out this

 

See the Pen jPmRWV by bassta (@bassta) on CodePen

 

But basically for more complex parallax scrolling,  ScrollMagic is the best option since it is a scrolling manager for complex scene parallax scrolling management.

 

I know, I tried it ScrollMagic in the past and it's cool, but I don't think it's really necessary in this case. I mean, I know how to trigger a tween when an element appears in the viewport, I just need to update it on scroll.

 

The pen you posted is really nice, but it's quite different from what' I'm trying to do: it doesn't use gsap at all, so the images aren't animated; also, the images are set as background, which in my case doesn't really work

Link to comment
Share on other sites

I'd echo Sir Jonathan's advice and recommend staying with ScrollMagic. Yes - it may be unnecessary in this case, but it's only 6kb gzipped and comes with a lot of functionality. It's lightweight and makes your life easier. But that's only my 2 cents worth. YMMV

 

Happy scrolling.

:)

  • Like 2
Link to comment
Share on other sites

Sorry, that isn't something that GSAP does natively or something I can figure out for you.

ScrollMagic does everything you need. I think you will be much better off using it than trying to re-build it's core features from scratch. 

  • Like 1
Link to comment
Share on other sites

  • Solution

There was a  topic posted a couple of weeks ago about not using ScrollMagic...

http://greensock.com/forums/topic/14870-do-i-need-scrollmagic-to-use-gsap/?p=63860

 

I'm sure ScrollMagic is a great product, and I'm not trying to convince anybody otherwise, but this can be solved in 1 line of code. This normalizes the scroll value to a value between 0-1, a ratio.

var progress = (scrollValue - min) / (max - min);

Normalizing a value is key to figuring out most animation problems. Here are two different ways you can get the normalized value.

 

Using scroll position...

See the Pen c0d284a89ae1d15d5ec12ba4c9ee8f6b?editors=0010 by osublake (@osublake) on CodePen

 

Using client rect...

See the Pen 314e9c6f80001fd19dd0bf68d8fc292c?editors=0010 by osublake (@osublake) on CodePen

  • Like 8
Link to comment
Share on other sites

Great stuff, Blake.

 

Just in case people need a little more info on how normalize() and clamp() work here is a reduced demo with some comments

 

// normalize will return a value between 0 and 1
function normalize(value, min, max) {
  return (value - min) / (max - min);
}


// 40 is half-way between 30 and 50
// value, min, max
console.log(normalize(40, 30, 50)); // return 0.5




//clamp forces a value into a range
function clamp(value, min, max) {
  return value < min ? min : (value > max ? max : value);
}


//35 exceeds the max of 20 so it gets clamped to 20
//value, min, max
console.log(clamp(35, 0, 20)); // return 20

http://codepen.io/GreenSock/pen/PzLzoJ/?editors=1011

  • Like 6
Link to comment
Share on other sites

Thanks!

 

Here are two other functions that you can use with normalize. I consider them to be essential, and include them with every project I work on.

 

Lerp

I know I've mentioned this one before, but here it is again.

function lerp(min, max, ratio) {
  return min + (max - min) * ratio;
}

Does the same thing as a linear tween. A tween gets its progress value by normalizing time. You can see that it will give you the same results.

See the Pen e9b1ff54efd541b1bb0be4be013d8d38?editors=0010 by osublake (@osublake) on CodePen

 

Understanding how lerp works isn't that complicated. In fact, you've probably written a lerp function before. If you've done this, it's doing the same thing. Math.random() returns a value between 0 and 1, so that's the same as passing in a ratio.

function random(min, max) {
  return min + (max - min) * Math.random();
}

Here are some examples where I've used lerp.

 

Map

This combines lerp and normalize into one function, making it really easy to convert values between different ranges. 

function map(value, sourceMin, sourceMax, destMin, destMax) {
  return destMin + (destMax - destMin) * ((value - sourceMin) / (sourceMax - sourceMin)) || 0;
}

Or if that's too verbose...

function map(x, a, b, c, d) {
  return c + (d - c) * ((x - a) / (b - a)) || 0;
}

Here's a couple of demos where I use map...

 

Here are three short videos that explain these concepts a little better.

 

Normalize

 

 

Lerp

 

 

Map

 

 

 

  • Like 6
Link to comment
Share on other sites

There was a  topic posted a couple of weeks ago about not using ScrollMagic...

http://greensock.com/forums/topic/14870-do-i-need-scrollmagic-to-use-gsap/?p=63860

 

I'm sure ScrollMagic is a great product, and I'm not trying to convince anybody otherwise, but this can be solved in 1 line of code. This normalizes the scroll value to a value between 0-1, a ratio.

var progress = (scrollValue - min) / (max - min);

Normalizing a value is key to figuring out most animation problems. Here are two different ways you can get the normalized value.

 

Using scroll position...

See the Pen c0d284a89ae1d15d5ec12ba4c9ee8f6b?editors=0010 by osublake (@osublake) on CodePen

 

Using client rect...

See the Pen 314e9c6f80001fd19dd0bf68d8fc292c?editors=0010 by osublake (@osublake) on CodePen

 

Thanks, this is amazing and, I think, exactly what I was looking for. Also, I didn't know the "ticker" function and it seems really useful in scroll controlled animations. I suppose I need to look into it. Thanks again!

 

 

Sorry, that isn't something that GSAP does natively or something I can figure out for you.

ScrollMagic does everything you need. I think you will be much better off using it than trying to re-build it's core features from scratch. 

 
I know that ScrollMagic is great and I don't have anything against its use, but still there are various reasons for me to avoid it: even though the plugin itself is pretty light in terms of weight, then in the code is yet another level of abstraction and even more new syntax to deal with. I'm clearly no gsap expert in the first place, so having to use another library that depends on gsap I found myself a bit lost having to look at two documentations to understand what to do. But, I mean, maybe it's just a limit of mine.
Using only gsap it seems to me I can have more control. Again, maybe it's just because I'm still quite new to both library, but right now I prefer trying using gsap exclusively
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...