Share Posted May 31, 2018 Can someone please tell me how this site accomplished this type of parallax effect? Seems so easy but I find zero tutorials on it. It's a mystery! https://art4globalgoals.com/en/exhibition See the Pen by en (@en) on CodePen Link to post Share on other sites
Share Posted May 31, 2018 Hi @joej and welcome to GSAP!! I'm not sure specifically which aspect of the scroll/parallax you're looking for ... but if it's the ability to navigate to sections on scroll (with parallax as an characteristic of the transition), here is a post where I helped someone with that just a few weeks ago. And here is the CodePen specifically. See the Pen qYEKLy by sgorneau (@sgorneau) on CodePen Hope this helps! And happy tweening! 4 Link to post Share on other sites
Share Posted May 31, 2018 I assume you are referring to parallax scrolling on this page https://art4globalgoals.com/en/project Take a look at couple of demos in following threads, Also take a look at following article that discusses how different scrolling methods affect performance, https://blogs.windows.com/msedgedev/2017/03/08/scrolling-on-the-web/#lvzozB8m1fZOWgTt.97 4 Link to post Share on other sites
Author Share Posted May 31, 2018 Thanks, Sahil! Some of this is close to what I need. Just can't figure out how to give each element different z depths. Or maybe they are setting different speed for each element to give an appearance of depth? Link to post Share on other sites
Share Posted May 31, 2018 Ya they have different speed so it creates illusion of depth. Please go through the threads we mentioned, you would be able to modify them to achieve same effect. 2 Link to post Share on other sites
Author Share Posted May 31, 2018 I don't see anything about setting different speeds on the threads. I see this effect all the time but no one can explain it. Link to post Share on other sites
Share Posted May 31, 2018 Hi @joej, "speed" is just distance/time ... so that, in its most basic sense, is two properties of a tween on an object and can be represented by something like obj = '#someObject'; time = 1; distance = {x: 500}; TweenMax.to( obj, time, distance ); See the Pen KepvRV by sgorneau (@sgorneau) on CodePen Another aspect of z-depth is scale. Things close are larger and move faster, things farther away are smaller and move slower. Hope this helps! Here is a thread where I helped somebody understand that a while back. The specific pen: See the Pen YaJzZp by sgorneau (@sgorneau) on CodePen 3 Link to post Share on other sites
Author Share Posted May 31, 2018 Still not what I'm looking for. Seems like everyone is doing it but no one knows how. It's a mystery! Link to post Share on other sites
Share Posted May 31, 2018 11 minutes ago, joej said: Still not what I'm looking for. Seems like everyone is doing it but no one knows how. It's a mystery! Well, one thing is for sure, parallax and scroll events are no mystery! But, I am unsure of what you are looking for. The example you provided shows many things going on ... but 2 things at its core Scroll event triggering page navigation (albeit clunky arrow controls offer more reliability) Parallax (to some extent ... more-so fixed positioning on elements than anything else) as an effect on some transitions There are other cool things happening ... but what is it specifically your asking about? 3 Link to post Share on other sites
