Getting a ReferenceError when using timelinemax in an iframe

[jordanrdesigns]

I'm trying to use timelinemax to parallax some things in an iframe (I know iframes, gross but it's the solution I had to go with) but for some reason I am getting an error in the console saying timeline max is not defined. And I've made sure that it's loaded correctly, I'm also using codekit and I made sure that it's being concatenated and minified with the script file correctly and it is, but even trying to move it out of being concatenated and loading it before the rest of the script that calls it keeps telling me it's not defined.

 

What's even weirder is I'm calling the script the same way on the page that is loading the iframes in and it has no problems, it's only when I'm trying to load timelinemax in the iframe that I'm having issues.

[Jonathan]

Hello jordanrdesigns, and Welcome to the GreenSock Forums!

 

Without seeing your code, it could be a number of things:

• Is the Tweenmax.js being loaded in each iframe?
• Are these iframes referencing URL's from the same domain?.. ( if so there is a cross domain security policy )
• Are you using the latest version of GSAP? (at this time it is 1.11.8)
• Do you have a link to this code online?
• Do you have any code for reference?
• What exact errors are being outputted to the console?

If you can create a limited codepen example showing your GSAP code, it will be a big help in seeing your issue.

 

Here is a nice video tut by GreenSock, on How to create a codepen demo example.

 

We are willing to help.. but we just need to see your code in context.

 

Thanks

[jordanrdesigns]

http://dev.fotype.com/chris-russo-final/

 

When you load it up immediately you will see the errors in the console.

 

The scripts are being minified into one source, and if you open that file in inspector you will see it's being concatenated properly. And if you open the main.min.js file you can see it's being concatenated there properly to, however I get no errors from that file, only the section.min.js file being loaded in the iframe.

[Jonathan]

This doesn't look like a GSAP issue but more of a parsing error. You might want to try and unminify the files since something in the file is parsing wrong. 

• Have you tried to separate each script, and include it separately?
• And then in your minified file, see what breaks when you add each script minified back in one at a time?
• What did you use to minify the scripts?

Just a side note...

Also have you looked into maybe using AJAX to request those HTML pages as HTML snippets? .. so then you can get rid of the iframes and just insert those pages HTML content with AJAX?

[jordanrdesigns]

I will try this next, they have fixed content and since all fixed content has to be relative to the window I need to use iframes.

 

Each page will have a parallaxing feature, and they all come in from the right, so positioning each page off screen to the right works but since there is that fixed content that the other sections under the fold scroll over top of I can't position that content just right without using iframes unfortunately

[jamiejefferson]

You are not including the correct GSAP files in the-fight's script. If you compare the 2 pages, you'll see that main.min.js includes TweenMax while section.min.js only has TimelineMax. The base GSAP engine is TweenLite, and everything else extends that. Including TimelineMax only will not activate unless TweenLite is also available.

 

I'd recommend you build a working site with unminified scripts first, and only minify as the very last step before production. Debugging with minified scripts is a nightmare...

[jordanrdesigns]

...

 

And now it seems to be okay, thanks.

 

Anyone know how to get rid of all these stupid vimeo blocked frame origins now? Haha

[Jonathan]

Weird I suggested that on my second above post.

 

Regarding vimeo .. There is really nothing you can do about those vimeo iframe origin outputs to the console.. that happens when the browser inspector trys to access the iframe, but it cannot so it throws the error.

 

More info on iframe security:

 

http://javascript.about.com/od/reference/a/frame3.htm

Unsafe JavaScript attempt to access frame warning in Safari

 

"Unsafe JavaScript attempt to access frame with URL..." error being continuously generated in Chrome webkit inspector

 

http://blog.chromium.org/2008/12/security-in-depth-local-web-pages.html

 

Specifically about implementing Vimeo and JavaScript unsafe access... found on the Vimeo forums:

 

If you're using a webkit browser (Safari or Chrome) that error is actually coming from the Webkit Inspector trying to access the iframe (the Webkit Inspector is actually written in HTML and Javascript).

 

Hope this helps