Jump to content
Search Community

Parallax works in Chrome, breaks in Firefox.

DeltaFrog test
Moderator Tag

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

Hi all,

 

I have a bit of greensock that is creating a parallax pan on the background image of my wordpress site.  It works great in Chrome but Firefox stretches out the image and breaks the fixed position.  http://hematogenix.flywheelsites.com/company/

 

The original codepen works in Firefox.  https://greensock.com/forums/topic/17320-background-parallax-effect-on-mouse-move/

 

Can anyone illuminate why this is breaking in my setup?  

 

This is the code I am using in my site.

 

<script>
$("#post-1369").mousemove(function(e) {
  parallaxIt(e, ".background-inner", -30);
});

function parallaxIt(e, target, movement) {
  var $this = $("#post-1369");
  var relX = e.pageX - $this.offset().left;
  TweenMax.to(target, 1, {
    x: (relX - $this.width() / 2) / $this.width() * movement,
  });
}
</script>
 

Thank you!

 

 

See the Pen by company (@company) on CodePen

Link to comment
Share on other sites

When I open the console in FireFox I am seeing `TypeError: a is undefined`

 

In Chrome I see: `TweenMax is not defined`

 

To me this looks it's an issue with your overall JS setup rather than the code you're using to animate.

You have some of the JS Loading from the server and some inline. I'd bet the inline JS is looking for GSAP before it loads from the server. May want to delay your inline JS until the page is loaded/ready.

Another note: TimelineMax is included with TweenMax, so you don't need to import both.

 

Also, you're loading a lot of JS files (more than 15). You'll likely see a performance hit with this.

  • Like 4
Link to comment
Share on other sites

Thanks Elegantseagulls, 

 

I removed a few unused .js files as well as the extra call for TimelineMax.   I am no longer seeing the console errors in ether browser.  I also moved the inline javascript and placed it below where I am loading TweenMax.js in the theme options.  I also implemented a timer of 5 seconds on the Javascript.   It still works on Chrome but no luck in Firefox.  When using the timer - Chrome works after 5 seconds, Firefox breaks as soon as I rollover the image and the mousemove fires.  Is this not how to "delay your inline JS until the page is loaded/ready"?

 

This is the delay code I am using, is there a different way?  

 

 

<script>
var delayInMilliseconds = 5000; //5 second

setTimeout(function() {
  

  $("#post-1369").mousemove(function(e) {
  parallaxIt(e, ".background-inner", -30);
});

function parallaxIt(e, target, movement) {
  var $this = $("#post-1369");
  var relX = e.pageX - $this.offset().left;
  TweenMax.to(target, 1, {
    x: (relX - $this.width() / 2) / $this.width() * movement,
  });
}
  
 
}, delayInMilliseconds);
</script>
 

 

Thank you! 

 

 

Link to comment
Share on other sites

I'm not sure this is a GSAP-related issue, and it's just too cumbersome to try to troubleshoot a live site with so many other things going on, 3rd party scripts, etc. If you still need some help, please produce a reduced test case in codepen and we'd be happy to take a peek. 

  • Like 1
Link to comment
Share on other sites

In an effort to illuminate the path for those who wish to pursue integrating GS with Wordpress I will place what I found about the issue I faced here.  

 

Firefox Specific CSS was needed to achieve the desired parallax results.  http://hematogenix.flywheelsites.com/company/ 

 

This breaks in Firefox 

 .background-inner {
    background-repeat: no-repeat;
    background-position: center top;
    background-attachment: fixed;
    background-size: cover;
    transform: matrix(1, 0, 0, 1, 2.875, 0);
}

 

This works in Firefox
@-moz-document url-prefix() {
   .background-inner {
    background-repeat: no-repeat !important;
    background-position: center top !important;
    position: fixed !important;
    background-size: auto!important;

}
}
 

 

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...