How can i scroll to a section that is inside a overflow container?

[Balram]

Hi,

 

I am trying to go to a section on click. I tried to use scrollIntoView() it did go to the section but didn't trigger the gsap animation while going back so i found a plugin from gsap ScrollToPlugin that worked with other element but didn't work with section within a container that is set to overflow.

 

I have added a codepen it's a bit messy but i hope you get what i want to do.

See the Pen OJaxpKj by veuxon (@veuxon) on CodePen

[Rodrigo]

Hi,

 

I've read your post a few times and went through your code and I'm not 100% sure that I follow exactly what you're trying to do.

 

From the context I infer that you might be behind something like this:

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

 

Also this example can help as well:

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

 

Hopefully this helps getting you started. If you keep having issues, please be super specific about what you're trying to do (if possible include a link that shows the behaviour you're trying to achieve).

Happy Tweening!

[Balram]

11 hours ago, Rodrigo said:

Hi,

 

I've read your post a few times and went through your code and I'm not 100% sure that I follow exactly what you're trying to do.

 

From the context I infer that you might be behind something like this:

 

 

 

Also this example can help as well:

 

 

 

Hopefully this helps getting you started. If you keep having issues, please be super specific about what you're trying to do (if possible include a link that shows the behaviour you're trying to achieve).

Happy Tweening!

Thanks for replying, but I don't think this will do. What I am trying to achieve is scrolling into an element that is inside a container that is set to overflow scroll. I made some modifications to the code to make it even simpler to understand.

 

 

Now, when I click on the button that is supposed to make that element come to view, it just scrolls to the top or bottom, but when the element is in view, it does scroll to the top. I want to achieve this behaviour even when the element is not in view.

 

[Balram]

Nevermind, I found a solution. What worked for me was to make the element inside the overflow container scroll to top of the container and then when the element is visible in body then i used the scroll to plugin and it worked like a charm.