Scroll not working on the iFrame

[Dinesh V]

I have used gsap , scrollTo and Scroll Trigger plugins. The scroll not working on the iframe. I have attached codepen url .

See the Pen qBYMzOK by dineshrajav (@dineshrajav) on CodePen

[Rodrigo]

Hi @Dinesh V and welcome to the GreenSock forums!

 

There are a few things here, your content is not bigger than the screen so there is no place to scroll. Also you are using a third party plugin for smooth scrolling. Unfortunately we don't have the time resources to debug issues with other libraries or packages.  GSAP has it's own smooth scrolling solution called ScrollSmoother. It's a Club GreenSock plugin but you can test it (and every other bonus plugin) forking this codepen:

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

 

Finally you mention an iFrame, but I don't see any iframe in your HTML, you meant the iframe on codepen?

 

Let us know if you have any other question.

 

Happy Tweening!

[Dinesh V]

I have attached screenshot with iFrame, I have append iframe in id attribute of contactFormId

[Rodrigo]

Hi Dinesh,

 

First you have different versions of the GSAP core file and the plugins you are using. Your core file is the latest version while you are using the version 3.10.4 of the plugins, so a good start would be to update all the files to the latest version.

 

Besides the versions difference there are a few things that should be pointed. The iframe you are loading is causing a layout shift which completely throws off the calculations ScrollTrigger makes. I tried attaching a load event in the iframe element but that works only a few times, since the content of the iframe being loaded doesn't match when the iframe is completely rendered. The height reported for the iframe on the loaded event is quite less than the height reported later using a setTimeout or a GSAP Delayed Call. So basically this falls on waiting for all the content of the iframe being completely loaded and rendered.

 

Also you are using a jquery plugin for smooth scrolling, I  don't know how that could affect or add to the issues you already have with the iframe not being completely loaded. There is a good chance that it doesn't create an extra problem, but we can't know for sure.

 

The only solution I can offer is give the iframe a fixed height and an overflow auto property so ScrollTrigger's calculations are the same by the time the iframe is completely loaded. Another option is this question in Stack Overflow:

https://stackoverflow.com/a/24603642/2456879

 

Unfortunately we don't have the time resources to debug issues that are not GSAP related. GSAP is doing exactly what is supposed to do. Sorry I can't be of more assistance.

 

Let us know if you have any other question.

 

Happy Tweening!