babis Posted September 17, 2022 Share Posted September 17, 2022 Hi guys, i want in this code, when i scroll to green section to be sticky and as this is sticky, the right content to be scrolled .And when it finishes, to continue scrolling to section 3. I managed to make it sticky but as soon as the green section become sticky, then the content behind was scrolling and not the inside content. I hope you understand... See the Pen vYjxVQY by babistsour (@babistsour) on CodePen Link to comment Share on other sites More sharing options...
Cassie Posted September 17, 2022 Share Posted September 17, 2022 Hey, welcome to the forums! Are you looking for something like this maybe? See the Pen BaxWeoa?editors=1010 by GreenSock (@GreenSock) on CodePen Make the element sticky, then animate the 'scrollable' content inside that? 1 Link to comment Share on other sites More sharing options...
babis Posted September 17, 2022 Author Share Posted September 17, 2022 Yes Cassie. Exaclty that. But with the ability for the green section to grow as i scroll. Like my example. I put the code for that, but something goes wrong. Something like this.(Look at the video section) https://goclass.webflow.io/ Link to comment Share on other sites More sharing options...
Rodrigo Posted September 18, 2022 Share Posted September 18, 2022 Hi, First you should remove the margin in the parent element, so the green element can use the entire width of the screen: .how-work { margin: 32px; /* <- THIS */ display:grid; place-items:center; border-radius: 20px; height:99vh; color: white; } If you're animating the width property, transform origin is not needed, since that applies only to CSS transform properties. This works similar to the example you provided. tl.fromTo( ".how-wrapper", { width: "70%" }, { width: "100%", ease: "none" }, "<" ); Happy Tweening!!! 2 Link to comment Share on other sites More sharing options...
babis Posted September 18, 2022 Author Share Posted September 18, 2022 Thank you very much guys. I did it. I put the width to go from 70% to to calc(100% - 64px), so i managed the desired margin for both sides to be 32px. THanks a lot Link to comment Share on other sites More sharing options...
Rodrigo Posted September 18, 2022 Share Posted September 18, 2022 If you need that space you can use padding and the border-box CSS property to avoid calculations: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing 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