MatteoNet Posted May 8, 2023 Share Posted May 8, 2023 Hello everyone! i have this problem, as you see in the codepen, i have a first pinned section that scrolls down showing images, followed by a second section with horizontal scroll, and i'm trying to create a curtain type animation, on the first section, Let me explain better I would like the first section to finish the animation of the movement of the images, scrolling reduces and makes the section below appear blocking the general wrapper, but the pins of the two sections conflict and the height of the section is calculated double, do you have any advice on this? (Ps. are there Italians in this forum?) See the Pen PoyQdge by MatteoNet (@MatteoNet) on CodePen Link to comment Share on other sites More sharing options...
Cassie Posted May 8, 2023 Share Posted May 8, 2023 Hiya! The first animation could be a timeline instead of three tweens. You can't pin a section and also animate a parent on the y axis at the same time - that's going to mess up calculations Maybe you're looking for pinSpacing for the "curtain" effect? A little note - transforms are more performant to animate than layout properties like left/right etc See the Pen YzJegKd?editors=1010 by GreenSock (@GreenSock) on CodePen Hope this helps, 🍕 mi scusi, non parlo italiano 🇮🇹 1 Link to comment Share on other sites More sharing options...
MatteoNet Posted May 8, 2023 Author Share Posted May 8, 2023 I Thank you very much for the answer, I would like to first complete the animation of the first section "hero-section-container", then make the images open completely and then start the curtain animation which makes the first section collapse while blocking the whole external container of the two sections. For the first version of code i have, use the propriety of transform, but, responsive is a big problem Link to comment Share on other sites More sharing options...
MatteoNet Posted May 8, 2023 Author Share Posted May 8, 2023 My goal would be to replicate the same effect as in the image below, where the first section shrinks, and makes the one below appear, (this image is from my work, but in this case I can't replicate the effect having a first section that has a pin) Link to comment Share on other sites More sharing options...
Cassie Posted May 9, 2023 Share Posted May 9, 2023 Maybe something like this? See the Pen RweMpeV?editors=0010 by GreenSock (@GreenSock) on CodePen 1 Link to comment Share on other sites More sharing options...
MatteoNet Posted May 9, 2023 Author Share Posted May 9, 2023 Thank you very much for the answer, you turned my day around, // Imposto il Maxwidht in base al numero di slide let netPanel = document.getElementsByClassName("net-panel"); $("#net-panels-container").attr("style", "width:" + netPanel.length + "00%"); The horizontal slider is a dynamic element in php, which allows me to create these sections dynamically, and I seemed to understand that it should give a max width to "net-panels-container" 100% plus for each elements. now I tried to implement the code you provided, but the horizontal slider already starts its animation when you scroll the first container, why? Link to comment Share on other sites More sharing options...
Cassie Posted May 9, 2023 Share Posted May 9, 2023 Sure thing! I don't know where php is coming into this really. Unless the container is being injected after page load, in which case you may need to call ScrollTrigger.refresh() after the DOM is all finished loading? I can't really help more without seeing a minimal demo showing the issue Link to comment Share on other sites More sharing options...
MatteoNet Posted May 9, 2023 Author Share Posted May 9, 2023 My php code only generates elements dynamically, which are created before loading the page, however even in your example provided if, let's put the browser at full size, the horizontal carousel starts its animation already from the first scroll of the first section Link to comment Share on other sites More sharing options...
Solution Cassie Posted May 9, 2023 Solution Share Posted May 9, 2023 If it isn't starting exactly where you need, have a go at changing the values. Maybe something like this. See the Pen RweMpeV by GreenSock (@GreenSock) on CodePen 1 1 Link to comment Share on other sites More sharing options...
MatteoNet Posted May 9, 2023 Author Share Posted May 9, 2023 Thank you very much for the great help you have given me! you're great!" you helped a little beginner !! could you explain where I was wrong ? even just the topic then I'll look for more information. One last question, if I wanted to insert an absolute div (above the horizontal scroll section) that changes its opacity within the first element of the horizontal section, which parameter should I use to start the animation? its container? or a variable parameter? Thanks again for the help! If you come to Italy you will have a pizza as a gift! 😁 2 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