Jump to content
Search Community

GSAP - Foundation for Sites 6.2.4 (Yeti Launch) - Jquery v3.1.1 iOS issue

jh-thank-you test
Moderator Tag

Go to solution Solved by OSUblake,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

GSAP Community,

 

Thanks for taking the time to view this post and for any help you may provide.

 

I know this is not a specifically a GSAP issue but I'm hoping that someone else may have experienced this problem and found a solution. I have spent the better part of two days trying all kinds of potential fixes. I have tried setting Autoprefixer to work with iOS >= 7, trying different versions of Jquery with different versions of Zurb... the issue arises when you update to Foundation v6.2.x and above. I have tried several version of Jquery v 2.1.4 and above in conjunction with Foundation.

 

 

Here is the breakdown:

 

Yeti Compiled Version with Issues:

 

Note I'm hiding certain elements with CSS, then using GSAP to show them/set their initial position rotation etc. This helped to keep things form popping on screen and then popping again into their initial positions... it gives GSAP time to load then display everything (this note is more for other newbies like me - Thanks to Blake and Dipscom for showing me this!). 

 

This website has been compiled/bundled with Zurb's Yeti Launch (ISSUE GSAP - display properties not being applied):

http://herous.org/dev-zurb-yeti/

 

Screenshot of the website on iOS simulator (shows GSAP display properties not being applied):

http://herous.org/dev-zurb-yeti/assets/img/zurb-yeti-complied-ios-sim.png

 

Image of the error code in Safari dev tools (it's part of the SASS complied distribution of Foundation):

http://herous.org/dev-zurb-yeti/assets/img/ios-unepected-token.png

 

I'm not sure is this error is what is causing the issue with the images (an older version of Foundation that still has this media query function works without issue). 

 

image of gulp file settings:

http://herous.org/dev-zurb-yeti/assets/img/foundation-gulp-file-processing-order.png

 

Image of Autoprefixer processing order:

http://herous.org/dev-zurb-yeti/assets/img/updated-autoprefixer-default-settings.png

 

 

Working (non-Yeti complied) version:

This website has not been compiled with Yeti Launch - it is the simple CSS download everything option (has no issues that I know of):

http://herous.org/dev-zurb/

 

Image of the nav elements properly showing in the corners:

http://herous.org/dev-zurb/assets/img/zurb-NOT-yeti-complied-ios-sim.png

 

Codepen that is working (stripped down non-Yeti Launch compiled only TweenMax, foundation, and jquery are loaded ): 

 

 

 

I'm trying to use the latest and greatest of everything as well as take advantage of the way Yeti is setup to process/optimize the files for production (uglify, Autoprefixer, image optimization etc. - all handled through bower and gulp). Oh, I also set the gulp file to processes TweenMax before Jquery so it goes TweenMax /Jquery/Foundation (and support files)/custom Javascript.

 

(For other Newbies) Note: I have a Yeti complied version of Foundation (v6.0.3) with jquery v2.1.4 and TweenMax v 1.19.0 working. Zurb has done a bunch of bug fixes etc. since v6.0.3 - also you can use the non SASS/Yeti compiled version (the CSS download) with the latest and greatest... hope that helps someone else out.

 

 

I will reach out to the Zurb community as well as the developer of the plugin that is throwing the error - any finding I will cross post to help out others.

 

Thanks again.

See the Pen gLwJPY by jh-thank-you (@jh-thank-you) on CodePen

Link to comment
Share on other sites

  • Solution

What's the link to Yeti launch? I can't find it on their site.

 

I think I see your problem though...

 

ios-unepected-token.png

 

That arrow => you see there is an arrow function, and is part of the latest version of JavaScript (ES6).

$(window).on('resize.zf.mediaquery', () => {});

Safari doesn't support that syntax at the moment, nor will older browsers.

https://kangax.github.io/compat-table/es6/#test-arrow_functions

 

You're going to need to use Babel to compile all your JavaScript down to ES5.

https://babeljs.io/

 

Babel will convert ES6 code into compatible ES5 code, so that arrow function will become this...

$(window).on('resize.zf.mediaquery', function() {});

Once you do that, it should at least clear up those errors. Not sure if that will fix your display issues though.

  • Like 3
Link to comment
Share on other sites

Blake,

 

You are keeping late hours, just like me, thanks for the quick reply!

 

I did try the babel route as outlined here:

https://github.com/zurb/foundation-sites/wiki/Upgrading-to-Foundation-6.2

 

After I did that I started to received other errors... across all browsers... so I reverted back since iOS is the only problem without babel... maybe I did the update wrong (I will try again).

 

I should mention the error only shows in Safari iOS, all other browsers come back clean... (my old android is another story....) I even have this working on an Windows 8 phone...

 

I'm looking for the Yeti Launch Page now... will report back with a link (if not I could send you a dropbox link with the installer). While researching this I came across several posts that Zurb is getting ready to come out with v2 of Yeti with AngularJS 2 support... not sure why they would take the link down.

 

UPDATE the Google cached page still loads and the download link still works for the Mac version:

http://webcache.googleusercontent.com/search?q=cache:0WdQZa0pXScJ:foundation.zurb.com/develop/yeti-launch+&cd=1&hl=en&ct=clnk&gl=us

 

Thanks again Blake, your help is much appreciated.

 

PS I poster over at Zurb and Emailed the Developer that created that utility that is part of Foundation's core.

Link to comment
Share on other sites

post-47357-0-77611700-1479359054_thumb.gifBlake,

 

Thank you!!!!

 

By getting me to go back in and look at babel again, the browsers threw the errors again, but this time I dug a little deeper... Even though I had no errors in several browsers prior to babel, the errors that came up were to define variables... due to my not using commas in a list and for not defining some variables on the global level.

 

Yeti now compiles everything and Safari/ Xcode iOS simulator does not show any errors, also the display issues went away/GSAP display properties are working! 

 

Thank you again... a fresh set of eyes and advice from you are a big help! 

var configWidth = "150px";
var configHeight = "125px";
var configScaleWidth = "90vw";
var configScaleHeight = "90vh";
var configScaleLandingWidth = "500vw";
var configScaleLandingHeight = "500vh";
var configRatio = .7;
  • Like 1
Link to comment
Share on other sites

Nice! Glad you got it worked out.

 

Babel is really strict about global vars, which is what those semi-colons created. I used to use a single var to declare all my variables like that, but found it very error-prone for reasons you just discovered. I now declare each variable separately. I also find it easier to read the code with each variable declared separately, especially when using a code aligner to format the code. Remember, computers have no trouble reading code, humans, not so much.

 

There are pros and cons to both styles. If you're interested, here's a good read on stackoverflow about both approaches.

http://stackoverflow.com/questions/694102/declaring-multiple-variables-in-javascript

  • Like 1
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...