Jump to content
Search Community

Safari scrollmagic parallax Issue

msammons 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

I am currently building a website that utilizes gsap js and scrollmagic to create a parallax effect. It works perfectly in most browsers and I even got it to be responsive. However I noticed an issue with Safari 6 on Mac OSX where the animation still 'technically' works but is extremely glitchy.


You can see what I mean here: http://adm-rhino.unl.edu:82/why-college/


Any ideas on a solution or where the problem stems from would be a great help.

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums.


Is really hard to say what could be the issue without some code at least. The ideal situation is seeing a reduced sample that includes only the code that's causing the problem:




For what I can see in your site is that there are very large images in it, this can cause quite some nightmares some times. Inspecting a bit in your site there are paintings for big elements (1780 x 764, 1780 x 510, etc.) that take from 60 milliseconds to 130 milliseconds, that's way too much if you consider that the refresh rate of a browser is 16.6 milliseconds (60fps). To see this better resize the browser window to half the screen, probably you'll see a much better performance. With that said my guess is that this has nothing to do with GSAP. Mainly the browser is getting overwhelmed in this one.


One option could be add force3D:true in the tween's config object in the tweens that involve the large images:

TweenLite.to(element, time, {vars, force3D:true});

That will pass that particular instance to a GPU layer and could improve performance, but don't use this too much because it'd end up hurting performance instead of improving it. Use it just for those elements, I believe there are two large images in the page you linked. See what happens with that and let us know.



  • Like 1
Link to comment
Share on other sites

That seemed to help a little with the glitchyness. I was worried that the size of the images and the nature of the tween would cause some issues, hopefully I can find a way to rework it in the future.


When I get a chance I will see if I can replicate it in a codepen instance.

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