Reduce Section and element on scroll

[MatteoNet]

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

[Rodrigo]

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!

[MatteoNet]

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

 

 

[Cassie]

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? 

[MatteoNet]

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?

[Cassie]

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.

[MatteoNet]

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?

[Cassie]

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.

 

 

[MatteoNet]

i have found this example, is the right way to have a result

See the Pen 9e7bf431223f98516c0431cfdefb6e3f by GreenSock (@GreenSock) on CodePen