Share Posted August 15, 2016 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 More sharing options...
Share Posted August 15, 2016 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. 3 Link to comment Share on other sites More sharing options...
Author Share Posted August 15, 2016 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 More sharing options...
Share Posted August 15, 2016 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. 2 Link to comment Share on other sites More sharing options...
Share Posted August 15, 2016 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 2 Link to comment Share on other sites More sharing options...
Author Share Posted August 15, 2016 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 Link to comment Share on other sites More sharing options...
Share Posted August 16, 2016 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. 1 Link to comment Share on other sites More sharing options...
Share Posted August 16, 2016 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 8 Link to comment Share on other sites More sharing options...
Share Posted August 16, 2016 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 6 Link to comment Share on other sites More sharing options...
Share Posted August 16, 2016 That's really cool Blake. Carl - thanks for the extra explanation, that was quite helpful. 1 Link to comment Share on other sites More sharing options...
Share Posted August 17, 2016 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 6 Link to comment Share on other sites More sharing options...
Author Share Posted August 19, 2016 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now