Jump to content
Search Community

GS animation in Iframe : dynamic iframe-resizer size set to 0 durint GS animation

jbonlinea test
Moderator Tag

Recommended Posts

Hi there,

 

I'm throwing a bottle in the sea, without codepen as this involve iframe, but we could share code diferently afterward.

 

Basically I have a GS animation (awesome one actually), which involve some resizing of the main content div. This all works great.

Then I placed the page containing my animation into an Iframe, also no issue on a technical standpoint.

 

But as the animation resize the content of the page, having an iframe with a fixed height is not nice at all, design wise at least.

So I added the js library iframe resizer to handle the resize.

Which works, to a certain extend :

  • at load the iframe size is spot on,
  • when I start the animation, the iframe height is set to 0px;
  • after a certain amount of time* the iframe size it back to normal, here normal is not the size it had before the animation, but the size it should have once the animation if finished.

 

More technically, iframe-resizer console log that (for the key logs) :

  • mouse down on the iframe --> basically clicking on a button that start the animation
  • mouse up on the iframe --> follow up of above
  • send a request to the iframe content
  • get a response from the iframe content
  • set iframe size to 0px
  • then say : "Hidden iFrame detected, creating visibility listener"
  • then iframe-resizer routinely check if the iframe content has changed, and retunr no,  untill some point in time when
  • it again send a request and get a response from the iframe about the size
  • set the iframe height to it's "final height"

 

to baiscally stat and end size are ok, but in the meantime size is 0px, and it only get to its realy size a long moment after the animation is over.

 

 

The question are :

  • is there anything is GS that may cause this, as in my case the content of the iframe is never 0px in height
  • have you any similar exeprience, with iframe resizer, or any other way to wrap an animation in an iframe and have a decent front-end result.
  • any idea how to fix that

 

Regards

 

Link to comment
Share on other sites

Hey jbonlinea. I've never heard of iframe resizer. This is definitely not a support forum for it :) But if you make a clear, minimal demo of the issue perhaps we can take a look.

 

Why do you need to use an iframe at all? 

 

20 minutes ago, jbonlinea said:

is there anything is GS that may cause this

I'm not sure exactly what you mean by "this", but the chances that the issue stems from GSAP are very small. It's likely some issue related to the resizing script or the iframe telling GSAP the wrong dimensions or something.

Link to comment
Share on other sites

Hi

 

30 minutes ago, ZachSaucier said:

Hey jbonlinea. I've never heard of iframe resizer. This is definitely not a support forum for it :) But if you make a clear, minimal demo of the issue perhaps we can take a look.

 


Yes no worries I knwo it is not a pure GS issue, but see below

 

30 minutes ago, ZachSaucier said:

Why do you need to use an iframe at all?

 

portabiity, scalability, maintenance, etc.

or maybe I could go with a php script that append an external html... that might be better actually

 

30 minutes ago, ZachSaucier said:

I'm not sure exactly what you mean by "this", but the chances that the issue stems from GSAP are very small. It's likely some issue related to the resizing script or the iframe telling GSAP the wrong dimensions or something.

 

"this" is iframe size perceived as being 0px for some time during the animation.

 

the ifrrame resizing script do not speak to GSAP,

basically the iframe-resizer has a script in the host and in the child and they speak togather

 

GSAP is changing page height, which is the data read by iframe resizer.

 

knowing some bit of GS behaviour may help, for instance my animation use the flip plug-in, and as I understood GS knows the start and end size before starting to move things

 

Here is a demo with iframe resizer

here is the animation alone

the vertical arrow do not change page height, the horizontal one do change page height

Althous the intend of both is not to change height but move dom element which result in page height change :)

Link to comment
Share on other sites

3 minutes ago, ZachSaucier said:

Ya, I would not choose an iframe for those reasons. iframes are by nature very separate from your other page. It doesn't make sense to have regular page content in an iframe.

well the fact is that it is not really regular content ;)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...