neuhaus3000 Posted March 19, 2020 Share Posted March 19, 2020 Hey guys, I'm new to 3rd version. I'm quite new with Greensock actually. I would like to parallax some text in a div while the page and image on the left stays still until I reach the end of the text. (see image attached). So basically, the user : - scrolls - arrives at he div with the image and text - continues scrolling but only the text scroll till the end - continues scrolling to the rest of the page. Is there a way to do this? Any idea will be appreciated!! Thanks! neuhaus3000 Link to comment Share on other sites More sharing options...
ZachSaucier Posted March 19, 2020 Share Posted March 19, 2020 Hey neuhaus. It sounds like you want the behavior of position: sticky, a CSS property. It works in most modern browsers but if you need better support you can look up a polyfill for it. 2 Link to comment Share on other sites More sharing options...
neuhaus3000 Posted March 19, 2020 Author Share Posted March 19, 2020 Hey Zach, Thanks! But it's not a sticky situation... . The scrollbar has to scroll all the page not only the div. There are other divs before and after the one with the image and text. I don't think that sticky would work on this... I'll investigate. Thanks again! neuhaus3000 Link to comment Share on other sites More sharing options...
ZachSaucier Posted March 19, 2020 Share Posted March 19, 2020 Just now, neuhaus3000 said: I don't think that sticky would work on this... I'll investigate. If not, please be clear with why not and be more explicit with what you're wanting. A minimal demo of the situation would do wonders in helping us understand and help Link to comment Share on other sites More sharing options...
neuhaus3000 Posted March 19, 2020 Author Share Posted March 19, 2020 Here's a modified image... So when the user arrives at this section, when he scrolls, the text goes up to reveal itself. When the text is at the end, the navigator scrollbar scrolls the rest of the page. I hope it makes more sens. It's not a scrollbar in the div (iframe). Thanks!!! neuhaus3000 Link to comment Share on other sites More sharing options...
elegantseagulls Posted March 19, 2020 Share Posted March 19, 2020 14 minutes ago, neuhaus3000 said: There are other divs before and after the one with the image and text. This seems like the perfect application for position: sticky; See the Pen PeEaoq by elegantseagulls (@elegantseagulls) on CodePen 3 Link to comment Share on other sites More sharing options...
ZachSaucier Posted March 19, 2020 Share Posted March 19, 2020 I think I understand what you're getting at. You want there to be backgrounds like the slides that you show? So sticky wouldn't work because the entire background would have to be sticky in which case the scroll of the text wouldn't scroll with the page scroll? In that case, we almost assuredly need to see the basic setup in code to help because how to work around the issue depends on your setup. 1 Link to comment Share on other sites More sharing options...
neuhaus3000 Posted March 19, 2020 Author Share Posted March 19, 2020 4 minutes ago, ZachSaucier said: In that case, we almost assuredly need to see the basic setup in code to help because how to work around the issue depends on your setup. Ok, I'll try to do this today and come back soon. Thanks everyone! neuhaus3000 Link to comment Share on other sites More sharing options...
elegantseagulls Posted March 19, 2020 Share Posted March 19, 2020 @neuhaus3000 Is this what you're looking for? It's a little hacky, but gets the job done...at least from what I can gather from your wires. See the Pen BaNPKWP by ryan_labar (@ryan_labar) on CodePen 3 Link to comment Share on other sites More sharing options...
neuhaus3000 Posted March 19, 2020 Author Share Posted March 19, 2020 @elegantseagulls Hey! This is perfect, thanks!!! I'll make a quick check with my client... Thanks for this!!! neuhaus3000 Link to comment Share on other sites More sharing options...
neuhaus3000 Posted March 19, 2020 Author Share Posted March 19, 2020 Ok... Is there a way that everything moves (scroll) slightly when scrolling but the text faster (parallax effect)? This is way more difficult I can assume... Any ideas will be appreciated! neuhaus3000 Link to comment Share on other sites More sharing options...
elegantseagulls Posted March 19, 2020 Share Posted March 19, 2020 Hi @neuhaus3000, If you're looking to tie animations to scroll, you may find this article helpful: https://medium.com/elegant-seagulls/parallax-and-scroll-triggered-animations-with-the-intersection-observer-api-and-gsap3-53b58c80b2fa 4 Link to comment Share on other sites More sharing options...
neuhaus3000 Posted March 19, 2020 Author Share Posted March 19, 2020 @elegantseagulls Yes, thank you! Helpful indeed! 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