GSAP breaking layout

Design help General
1

Hi everyone,
I have a layout where I need to add smooth scrolling to, so I added GSAP’s ScrollTrigger and ScrollSmoother to the text content.

The Issue:
Is that the layout breaks meaning the div wrapping the text content is wider and larger in height than what it should be, and theres no scrolling going on. Please see the published links in order to see the issue.

I also have a circle type that isnt rotating ever since I inserted the GSAP code in the custom code area.

To see clearly what I mean I have prepared a few links (Read-Only and Published Links):

Link 1 - The page before adding the GSAP code
The Read-Only link:
https://preview.webflow.com/preview/parkison-aminochrome?utm_medium=preview_link&utm_source=designer&utm_content=parkison-aminochrome&preview=44c02747b676fe9f9d2b8c4f66f3b3c5&pageId=66d046fb5d6df2a0e0c94026&workflow=preview

The published link:
https://parkison-aminochrome.webflow.io/test3

Link 2 - The page with the GSAP code
The Read-Only link:
https://preview.webflow.com/preview/parkison-aminochrome?utm_medium=preview_link&utm_source=designer&utm_content=parkison-aminochrome&preview=44c02747b676fe9f9d2b8c4f66f3b3c5&pageId=66cb24f1ecc3e280719cdddd&workflow=preview

The published link:
https://parkison-aminochrome.webflow.io/test2

Link 3 - A Codepen with the GSAP code in use regarding the smooth scrolling which works fine

So my questions are:

  1. Why is the GSAP code breaking my layout and why is the Circle type not working?

  2. What is the solution?

Hopefully someone can help me out cause I ran out of ideas on how to fix that. I appreciate your time and help

2

Not exactly sure which problem is exactly happening, but your text block won’t scroll because you don’t have overflow set to scroll on ‘Card-Text-Container-Dk’. Give that a go and see if it helps

image
image1872×1432 193 KB

3

Hi, yeah unfortunately that didn’t do much, but thanks for your help