Parallax scrolling sections

[qarlo 2 Likes (Newbie)]

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

[Jonathan 5,176 Likes (Superhero)]

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.

 

[qarlo 2 Likes (Newbie)]

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

[PointC 8,599 Likes (Superhero)]

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.

[Carl 9,066 Likes (Superhero)]

I'd agree with the other guys as far as recommending ScrollMagic.

 

If you only need to convert a scroll amount to an animation's progress() then this pen from Adrian Parr should help

http://codepen.io/adrianparr/pen/mbrqt?editors=0010

[qarlo 2 Likes (Newbie)]

If you only need to convert a scroll amount to an animation's progress() then this pen from Adrian Parr should help

See the Pen mbrqt?editors=0010 by adrianparr (@adrianparr) on CodePen

 

Well, this is what I'm actually trying to do, but in my case I want to apply the progress only after some point

[Carl 9,066 Likes (Superhero)]

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. 

[OSUblake 9,990 Likes (Superhero)]

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

[Carl 9,066 Likes (Superhero)]

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

[PointC 8,599 Likes (Superhero)]

That's really cool Blake. 

 

Carl - thanks for the extra explanation, that was quite helpful.

 

[OSUblake 9,990 Likes (Superhero)]

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.

• Function-based value to evenly position elements - 

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

• Creating gradients - 

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

• Speed + motion path - 

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

• Filling in gaps in a particle emitter - 

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

 

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...

• Convert movement of Draggable to scale value - 

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

• Synchronize animation from one coordinate space to another - 

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

 

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

 

Normalize

 

 

Lerp

 

 

Map

 

 

 

[qarlo 2 Likes (Newbie)]

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