AmanVerma Posted March 1 Share Posted March 1 Hey Everyone! Here's the problem 1. There's a red which has a green box below it 2. The green box has three cards in it which I want to scroll into view as I scroll down 3. They are scrolling into view but the red box above keeps going out the view during the scrolling action and I need the green and the red box to keep on touching 4. When I put all the classes of the boxes in an array, they were scrolling into view almost together timeline.to(['.mini-card:nth-child(1)','.mini-card:nth-child(2)', '.mini-card:nth-child(3)' ], { y: (index) => finalpositionArray[index] }) 5. So I chained them like so: timeline.to('.mini-card:nth-child(1)', { y: (index) => finalpositionArray[index] }).to('.mini-card:nth-child(2)', { y: (index) => finalpositionArray[index] }).to('.mini-card:nth-child(3)', { y: (index) => finalpositionArray[index] }) 6. But the scrolling still keeps on introducing a gap between the red and the green box. How do I solve it? Thanks! See the Pen VwNwMoy by amanopia (@amanopia) on CodePen Link to comment Share on other sites More sharing options...
Toso Posted March 1 Share Posted March 1 hi @AmanVerma in your demo i would recommend using a loop and animating on Ypercent instead of y it will be easier also take a good look at this post by @mvaneijgen to get a good understanding of how stacking works another great demos See the Pen jOROjzb?editors=1010 by ahmed-attia (@ahmed-attia) on CodePen also you can load gsap from here not in the HTML or just fork this one See the Pen aYYOdN?editors=1010 by GreenSock (@GreenSock) on CodePen 1 Link to comment Share on other sites More sharing options...
Solution Rodrigo Posted March 1 Solution Share Posted March 1 Hi, If I understand correctly, just pin the parent element for both boxes: const timeline = gsap.timeline({ scrollTrigger: { trigger: ".div-2", markers: true, start: "top 20%", end: "bottom 20%" , pin: ".parent-div", scrub: 0.2 } }); Here is a fork of your demo: See the Pen JjVjgYa by GreenSock (@GreenSock) on CodePen Hopefully this helps. Happy Tweening! 1 Link to comment Share on other sites More sharing options...
Toso Posted March 1 Share Posted March 1 @Rodrigo thank you, 🫡 i didn't see that he wanted to pin the red and green boxes I just saw the code and assumed he was having a problem with the green box Link to comment Share on other sites More sharing options...
Rodrigo Posted March 1 Share Posted March 1 @Toso No problemo! Thank you for all your effort and help in the forums! 🙌 1 Link to comment Share on other sites More sharing options...
AmanVerma Posted March 2 Author Share Posted March 2 Thanks @Toso for adding those wonderful articles, they were really informative and I learned that one can also use grid over position: absolute, since it also keeps elements in the flow of the document, and thanks @Rodrigo for helping with the solution, I totally skipped the part where it mentions in the documentation that `An element (or selector text for the element) that should be pinned during the time that the ScrollTrigger is active` and focussed just on the property taking boolean values. Also the video by @Cassie gave me a totally new perspective on approaching scrollTrigger. I'll try to use "progressive enhancement" wherever I can. Thanks! 1 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