MatteoNet Posted June 12, 2023 Share Posted June 12, 2023 Hi ! I would like a hand to start developing this section, I would be immensely grateful to you because I can't get out of it, I have these sections and I would like scrolling to pin the #tg-course section and each , tg-panel reduce its height up to 100px and only the title remains with reduced font size, could you help me with some ideas? A thousand thanks See the Pen WNYvVvd by MatteoNet (@MatteoNet) on CodePen Link to comment Share on other sites More sharing options...
Rodrigo Posted June 12, 2023 Share Posted June 12, 2023 Hi, That doesn't really sound as something extremely easy and, while we appreciate that you created a minimal demo, your codepen's JS section is completely empty! We don't have the time resources to create custom examples from scratch or debug complex logic issues for our users. If you want you can contact us for paid consulting or you or post in the Jobs & Freelance forum to find some help there. Good luck with your project! Happy Tweening! Link to comment Share on other sites More sharing options...
MatteoNet Posted June 13, 2023 Author Share Posted June 13, 2023 Thank you all again for your availability, for now I've managed to get this result, managing to resize the elements and keep them fixed, but I don't understand how to intervene on the content of the elements that remain visible, do you have any ideas? or examples you can study? Thanks always to everyone Link to comment Share on other sites More sharing options...
Cassie Posted June 13, 2023 Share Posted June 13, 2023 2 hours ago, MatteoNet said: I don't understand how to intervene on the content of the elements that remain visible Can you maybe rephrase this? Link to comment Share on other sites More sharing options...
MatteoNet Posted June 13, 2023 Author Share Posted June 13, 2023 The contents of collapsed elements are not collapsed together with the container, my goal is to shrink the title and make the other elements disappear on container shrink, I apologize for my english I have tried to give in css, overflow hidden, for deduce pin height i hav to set with gsap do reduce height? Link to comment Share on other sites More sharing options...
Cassie Posted June 13, 2023 Share Posted June 13, 2023 Oh ok, gotcha! You had some typos in your HTML - // bad class"tg-title1 tg-title" // good class="tg-title1 tg-title" I fixed that for you. Here's a demo with one of the titles animated on the timeline. The position parameter will be helpful for positioning the animations. Link to comment Share on other sites More sharing options...
MatteoNet Posted June 13, 2023 Author Share Posted June 13, 2023 I fixed the html code, do you have any advice on how to reduce the height of the pinned section, to reduce it together with the last element? Link to comment Share on other sites More sharing options...
Cassie Posted June 13, 2023 Share Posted June 13, 2023 The best approach would probably be to set up the height in the CSS to be the smallest size by default, and then animate from the larger size. Animating height is always a bit of a tricky beast though, if you search the forums you'll find a lot of threads and attempted solutions. 1 Link to comment Share on other sites More sharing options...
MatteoNet Posted June 13, 2023 Author Share Posted June 13, 2023 i have found this example, is the right way to have a result See the Pen 9e7bf431223f98516c0431cfdefb6e3f by GreenSock (@GreenSock) on CodePen 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