Jump to content


scrollToPlugin is buggy on Safari

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

The scrollToPlugin is buggy on Safari, when scrolling to a section of a long page. The plugin works perfectly on Chrome and Firefox. So there is definitely an issue with Safari, not with my code :).


Specifically, sometimes when you scroll to a div or element, the page doesn't scroll all the way; it will just scroll a bit and stop. Other times it may work. My code is simple:

TweenMax.to(someElement, 0.9, {
scrollTo: {y: scrollToVal},
ease: Expo.easeInOut

I tested on the latest version of all three browsers. Safari 8.0.x is the culprit.

Link to comment
Share on other sites

Have you tried to include the autoKill: false property to see if this behaviour is due to something else messing with the scroll?

  • Like 3
Link to comment
Share on other sites

Hello peterPotter, and Welcome to the GreenSock Forum!


If possible can you setup a very limited codepen example, so we can try to replicate this on Safari and Safari 8.0 ?


This way we can see what scrollToVal value is being passed and debug the code in real time. 


Thank You!

  • Like 2
Link to comment
Share on other sites



I'm coming across the same problem and can't figure this out...

Apparently TweenLite fires a "sleep" function out of nowhere and only on safari. I checked and I don't really see what could possibly interfere with the scrollto tween.




Here is the link of the webpage : http://romaincazier.com/ghostape


I know it's a bit of a mess in my code (sry), but you can still see that there is nothing wrong (at least to me !)

$('#intro a').click(function(e) {
		if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
			var target = $(this.hash);
			target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
			if (target.length) {
				scrolling = true;
				TweenLite.to(window, 2, {scrollTo:{y:target.offset().top}, onComplete: function() {
					scrolling = false;
					$('article video')[inc].play();
					$('body').css('overflow', 'auto');

Thanks in advance !

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.