Expand section append child on click

[Tommie.lehmann]

Pls have a look at my pen:

 

I have been trying to work with an effect like this https://spaincollection.com/destinations/north-of-spain/nature but on horizontal sections.. I have the expand and tried all sort of resize event listeners but somehow I can't make it maintain scroll position and push out both up and down to expand.. pls.. I am not a pro is this but really trying to learn..  any suggestions?  I would of course like the expanded section to end up centered on screen.. 

 

By the way I still didn't figure out why the smooth transition isn't working before second click?

See the Pen oNabRdv by tommie-lehmann (@tommie-lehmann) on CodePen

[Rodrigo]

Hi,

 

What you can do is create an array with the original top position of each section and use the ScrollTo Plugin in order to scroll to that particular position using GSAP:

See the Pen eYPZNKL by GreenSock (@GreenSock) on CodePen

 

Finally, when a section is expanded I strongly recommend you to disable the scrolling by setting overflow hidden in the document and use the Observer Plugin to watch for different events as wheel, pointer, touch, etc., in order to move your content up and down:

https://greensock.com/docs/v3/Plugins/Observer

 

Hopefully this helps.

Happy Tweening!

[Tommie.lehmann]

Hey Rodrigo, thanks man.. that what of course what I didn't think of.. 

[Tommie.lehmann]

Hi Rodrigo I am having some problems .. not sure I really get the observer plugin.. I have been looking for examples but didn't find any on topic. Could you hint me in the right direction?  Sorry and pls disregard if this is beyond the scope of the forum.. 

[Rodrigo]

Hi,

 

This is the starting point in the Observer docs:

See the Pen XWzRraJ by GreenSock (@GreenSock) on CodePen

 

Also this collection offers a series of great examples that can provide inspiration:

https://codepen.io/collection/KpNYOd

 

This thread also has a couple of examples that increase the progress of a GSAP instance based on the Observer Plugin:

 

Of course the most important thing is that you provide a minimal demo of your own that shows exactly what you have and where the issue actually is.

 

Hopefully this helps.

Happy Tweening!