Hi,
I’ve been getting to grips with the new interactions functionality. It works great on my windows laptop. On my iphone, the momentum scrolling or deceleration is causing animation glitches. Any idea how I can make this not glitch on iphone? Try tapping up and down with your thumb. You will see the box jump.
http://www.fastersmartereasier.com/noindex/pinegrow/
this is the project
http://www.fastersmartereasier.com/noindex/pinegrow/iphone-test.zip
Mike
Hi Mike,
Welkom to this forum! 
Tested the animation with Xcode in My iMac on the iPhone 8 IOS 13.2 and I don’t see any issues!
Xcode simulator is very accurate.
On my old iPad IOS 9.3.5 I see a issue, the square only go’s from bottom to top in a strait line at the left side.
On a new iPad with IOS 13.2 I see no issues.
What is your iPhone model and IOS version I can use it to test your animation.
I keep the animations mostly away from mobile devices, because it’s asking for trouble! like this with a little line of JavaScript!
`if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
// some code…
}else
{
//Now include js files
/////////////////////////
/////////////////////////
///////////////////////////////////////
//Nicescroll start is just an example
$(“html”).niceScroll({
cursorcolor: “#3B3C3E”,
cursorwidth: “12px”,
cursorborder: “0px solid #000”,
scrollspeed: 80,
mousescrollstep: 80,
autohidemode: true,
background: ‘#ddd’,
hidecursordelay: 400,
cursorfixedheight: false,
cursorminheight: 20,
enablekeyboard: true,
horizrailenabled: false,
bouncescroll: false,
smoothscroll: true,
iframeautoresize: true,
touchbehavior: false,
zindex: 999
});
$(‘html’).getNiceScroll().resize();
} // sluiten user agent///
`
But maybe it can be done within the application, have not played enough with it yet.
Regards,
David
I’m on an iPhone XR. iOS 12.4.1
When the page first loads it jumps maybe 40 pixels, also when you stop and start a new scroll. If you keep your finger down as you scroll its fine
Did you try updating to the latest OS? Because here I see no issues in 13.2.
Don’t guaranty it will solve the problem, but at least you know then it’s not IOS.
If that doesn’t solve the problem I would contact support!
So I updated iOS. It still does it but I have worked out why. When I scroll down it brings in the url bar and the bottom bar. This is changing the scroll position. When you scroll up it doesn’t do it. I wonder if there is a way to make the scroll position not be influenced my safaris chrome. Maybe I could give the html element some space at the bottom of the viewport.
I would contact support and I also wonder what they will say!
I think support could fix it maybe by using this method:
The problem is that the inner height of the browser changes as you scroll on mobile safari due to the hiding and showing of the url bar and browser chrome.
If the interaction js could be modified to use this ios inner height function to calculate the animation timeline position, I think that should fix it.
I worry though how it would affect performance.
Another solution would be a hack to make mobile safari permanently show the url bar chrome and bottom controls. I haven’t been able to find one.
i’ve been playing with it all night and I don’t think there is a non-js fix.
This site forces the url bar to remain
but it does it by hiding the overflow on the 100% height body, and putting overflow-y: scroll on a wrapper inside body.
This keeps the bar in place but scrolling on a container other than body is slow and unusable.
Hopefully pinegrow can add the JS to the library to base the maths off of the consistent IOS inner height.
@Emmanuel is there any chance this could be looked into please?
support@pinegrow.com is your best option!
https://greensock.com/forums/topic/18719-how-to-manage-gsap-animation-in-mobile-device/
https://greensock.com/forums/topic/18094-poor-mobile-performance/
https://greensock.com/forums/topic/18280-truly-responsive-animations/
GreenSock is where the library comes from.
well…>I just went to look at those fine resources and was looking at
…After looking at that,I have no idea what I was thinking attempting animation on a web page!
If anyone requires animation on their website…I am going to stick a bent post it note in the centre of thier screen, and turn their desktop fan on…
Really… life is simply too short…
making effective use of the transform and transition properties in CSS is not super complicated and PG supports both fairly well.
a bit of visual interest is more than enough, and anyone who want’s to have all these things bouncing around and creating distractions, probably don’t have very interesting content anyway.