Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
grommas

ScrollTo Plugin: Jumping on ongoing touch gestures

Recommended Posts

Hi there, 

 

Based on TweenMax, the ScrollTo Plugin and ScrollMagic (this is probably not where the problem came from):

I wanna have a hero section on top of a page, only tweening downwards if the user is scrolling from the very beginning. Everything works as expected on my laptop (MBP). Following problem: If I use a touch-device (iPhone SE, iOS 12.4.1) and use a short touch gesture, the window is tweening to the destination withouth any issue. But if I keep my finger on the screen, the page starts to flicker and jumps back to the top after the tween finished.

 

Is there any way to fix this behaviour? Already tried to toggle preventDefault with eventListeners on Callbacks as well as setting the position again onComplete.

 

Since it's not working with Codepen on my mobile device (maybe because of the iframe issue since iOS11?):

http://grommas-dietz.com/reduced-test.html
 

See the Pen YzKEQME by grommas (@grommas) on CodePen

Share this post


Link to post
Share on other sites

Hi @mikel,

 

Thank you for your response. Can’t get it work with the tips in your link. The stackoverflow post is a couple of years old, I think with turning off the passive state of the touch event listeners you don’t need to listen to the scroll itself, with document.scrollingElement.scrollTop I don’t have to to get the window.pageYOffset. But I tried it nevertheless. Could you explain your answer so that I get a clue what you exactly mean?

 

Here are my tries:

// assume the feature isn't supported
var supportsPassive = false;
// create options object with a getter to see if its passive property is accessed
var opts = Object.defineProperty && Object.defineProperty({}, 'passive', { get: function(){ supportsPassive = true }});
// create a throwaway element & event and (synchronously) test out our options
document.addEventListener('test', function() {}, opts);

// var allowScroll = true;

function preventDefault(e) {
	e = e || window.event;
	if (e.preventDefault) {
		e.preventDefault();
	}
	//	if (e.stopImmediatePropagation) {
	//		e.stopImmediatePropagation();
	//	}
	if (e.stopPropagation) {
		e.stopPropagation();
	}
	e.returnValue = false;
}
function getBodyScrollTop() {
	var el = document.scrollingElement || document.documentElement;
	return el.scrollTop;
	// return window.pageYOffset
}
function setBodyScrollTop(scrollTop) {
	var el = document.scrollingElement || document.documentElement;
	el.scrollTop = scrollTop;
	// window.pageYOffset = scrollTop;
}
function addMousewheelListener() {
	if (e.addEventListener)
	{
	    // IE9, Chrome, Safari, Opera
	    e.addEventListener("mousewheel", preventScroll, supportsPassive ? { passive: false } : false);
	    // Firefox
	    e.addEventListener("DOMMouseScroll", preventScroll, supportsPassive ? { passive: false } : false);
	}
	// IE 6/7/8
	else
	{
	    e.attachEvent("onmousewheel", preventScroll);
	}
}
function removeMousewheelListener() {
	if (e.removeEventListener)
	{
	    // IE9, Chrome, Safari, Opera
	    e.removeEventListener("mousewheel", preventScroll, supportsPassive ? { passive: false } : false);
	    // Firefox
	    e.removeEventListener("DOMMouseScroll", preventScroll, supportsPassive ? { passive: false } : false);
	}
	// IE 6/7/8
	else
	{
	    e.detachEvent("onmousewheel", preventScroll);
	}
}
function removeTouchListeners(e) {
	window.removeEventListener("scroll",     preventScroll);
	window.removeEventListener("touchmove",  preventScroll);
	window.removeEventListener("touchstart", removeTouchListeners);
	window.removeEventListener("touchend",   removeTouchListeners);
}
function preventScroll(e) {
	// if(TweenMax.isTweening(window) || !allowScroll) {
		// e.preventDefault();
		// e.stopImmediatePropagation();
		preventDefault(e)
	// }
}
function deactivateScroll() {
	// allowScroll = false;
	console.log('fired 1');
	// window.addEventListener("touchstart", preventScroll, { passive: false });
	window.addEventListener("touchmove", preventScroll, { passive: false });
	window.addEventListener("scroll", preventScroll, { passive: false });
	addMousewheelListener();
}
function activateScroll() {
	// allowScroll = true;
	removeMousewheelListener();
	// var scrollTop = y;
	// var scrollTop = getBodyScrollTop;
	// setBodyScrollTop(scrollTop);
	window.addEventListener("touchstart", removeTouchListeners, { passive: false });
	window.addEventListener("touchend", removeTouchListeners, { passive: false });
	// var event1 = new Event('touchstart');
	// var event2 = new Event('touchmove'); 
	// var event3 = new Event('touchend'); 
	// window.dispatchEvent(event1); 
	// window.dispatchEvent(event2); 
	// window.dispatchEvent(event3);
}

Of course with the callbacks in my tween:

var vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);

var ctrl = new ScrollMagic.Controller();
var sceneLeave = new ScrollMagic.Scene({
  triggerElement: "#content",
  triggerHook: "onEnter",
  offset: 1
})
  .addTo(ctrl)
  .on("enter", function(event) {
    TweenMax.to(window, 1, {
      scrollTo: {
        y: "#content",
        autoKill: false
      },
      onStart: deactivateScroll,
      onComplete: activateScroll
    });
  });

 

Share this post


Link to post
Share on other sites

Hey @grommas,

 

There is a direct relationship between iOS scrolling and headaches.

 

Please do some searches in the net I´m not an expert ...

 

Good luck.

Mikel

Share this post


Link to post
Share on other sites

I did without any luck. The plugin is supposed to scroll the window on all plattforms, that’s why I'm asking.. but thanks anyway, @mikel!

 

Are there any plans to get something like this fixed, or is it a rare case and only partially related? Could try to reproduce it without ScrollMagic, to see if the problem still exist.

Share this post


Link to post
Share on other sites
6 hours ago, grommas said:

Are there any plans to get something like this fixed, or is it a rare case and only partially related? Could try to reproduce it without ScrollMagic, to see if the problem still exist.

 

What makes you think the problem is related to GSAP? You're using a 3rd party scroll library. You should probably check that first.

https://github.com/janpaepke/ScrollMagic

 

 

  • Like 2

Share this post


Link to post
Share on other sites

I think this is just an iOS issue. Even trying to prevent the body from scrolling during the animation (overflow: hidden) results in the jumpy behavior.

  • Like 2

Share this post


Link to post
Share on other sites
39 minutes ago, OSUblake said:

 

What makes you think the problem is related to GSAP? You're using a 3rd party scroll library. You should probably check that first.

https://github.com/janpaepke/ScrollMagic

 

 

Other animations (moving header and content) are not affected, only when the ScrollTo plugin is triggered. That’s why I thought it could be related to the plugin. Sorry if I got it wrong!

  • Like 1

Share this post


Link to post
Share on other sites

No need to be sorry. You're good. I checked and the plugin seems to be the problem, but I don't know of if it's an issue we can fix. That's what I was trying to say in my last post. It's a deeper problem related to iOS.

 

 

  • Like 2

Share this post


Link to post
Share on other sites

 

This solution is a bit unusual and maybe overdone.

based on uturn.js

But seems to get the IOS stress under control ...

 

See the Pen zYOPabe by mikeK (@mikeK) on CodePen

 

And here the live version for the iPhone test.

 

All the best ...

Mikel

  • Like 3
  • Thanks 1

Share this post


Link to post
Share on other sites

Thank you all for your input, I will stick to my solution and disable it on touch devices. Not sure yet. Annoying, when it’s almost working. 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×