Animation smoother with onUpdate function

[gregor]

Hi,

 

I've created a smooth page scroll. That is the shortened code

 

this.el_body.addEventListener('wheel', e => this.wheel(e))

scrolling() {
  console.log('--- scrooolling')
},
  
wheel(e) {
  e.preventDefault()
  let deltaY = e.deltaY
  // firefox
  if (e.deltaMode === 1) deltaY = 40 * e.deltaY
  this.raf('move', deltaY)
},
  
move(delta) {
  TweenMax.to(this.el_body, 1, {
    y: -this.scrollTop,
    ease: Power2.easeOut,
    overwrite: true,
    force3D: true,
  })
}

 

Sometimes on macOS Chrome the animation becomes choppy, I played a little bit around and figured out that if I add  onUpdate: () => this.scrolling() it becomes much more smoother. The function only outputs a log. My Question ist does onUpdate something more behind the scenes? Or am I just imagining it?

 

[Jonathan]

Hello @gregor and Welcome to the GreenSock Forum!

 

Can you please create a limited codepen example so we can see your code in action to better see what your seeing? This way we can better help you!

 

 

Happy Tweening

[GreenSock]

Yeah, a demo would be super helpful, as @Jonathan mentioned. I can definitely say, though, that adding an onUpdate does absolutely nothing to improve performance in GSAP. If anything, it would degrade performance very slightly because it's an added function call on every tick. 

[gregor]

Thank you guys, I have done some more testing and the choppy animation is only on my iMac 27" workstation and only in chrome and firefox. Safari runs smooth. At home on my windows 10 it runs on every browser fine. Also on a macbook pro no problems. I think the problem is the retina display... But I will create a codepen in the next few days. First time that I use tweenmax and maybe you can give me some advice how to increase performance  I have uploaded a testversion there http://blackskull.herokuapp.com (sometimes it needs time to load, because the server put the app in "sleep mode" after 30mins inactivity)

[Visual-Q]

it's smooth on my imac though I don't have a retina display.

 

Maybe in the full code you've got some kind of throttling added that I'm not seeing but if I'm interpreting it correctly your code appears to create a new tween and overwrite the previous every time the event listener sees a delatY change.

 

Maybe you could refactor it to throttle the number of tween calls and pass the dynamically changing deltaY to the tween in a modifiers function? Not sure if that would work better but it seemed logical to me.

 

Also you're doing a lot of console logging and writing the changing deltaY to a data item, these would also probably be slowing down execution.

[gregor]

hi,

 

I created an example on codesandbox, because I use vuejs for my projects. Hope that is ok.

code: https://codesandbox.io/s/q85lo2k43w

full window: https://q85lo2k43w.codesandbox.io/

 

@Visual-Q I moved scrollTop into the vuex storage, so I no longer use the dataAttr. But in the example above I removed this, because I will use it later for my waypoint component and that have nothing todo with the scroller at the moment.

 

I was looking around how other did smooth scrolling with tweenmax and found this page https://theoaksprague.cz/en_US. this works really well, it's smoother than smooth  but I cant figure out what they are doing different... I spied a little bit in their script, but I don't get it, what they are really doing...

 

 

 

[gregor]

hi,

 

so no one has an idea? how to fix the choppy animation on an iMac 27" (chrome and firefox, safari is supersmooth)?

 

I have taken a screenshot where you can see that it goes down to 8fps...

 

 

the related code snippets

 

this.el_inner.addEventListener('wheel', e => this.wheel(e), {
  passive: false
})

deltaY(e) {
  let deltaY = 0
  if (e.wheelDelta) {
    deltaY = -e.wheelDelta
  }
  if (e.deltaY) {
    deltaY = e.deltaY
  }
  if (e.deltaMode === 1) {
    deltaY *= 40
  }
  return Math.round(deltaY)
},

wheel(e) {
  e.preventDefault()
  const scrollTo = this.scrollTo + this.deltaY(e)
  this.raf('move', scrollTo)
},
move(scrollTo) {
  // remove over and under scrolling
  this.scrollTo = Math.max(0, Math.min(scrollTo, this.maxScroll))

  if (this.innerTweenID) {
    this.innerTweenID.kill()
  }
  this.innerTweenID = TweenMax.to(this.el_body, 1, {
    y: -this.scrollTo,
    ease: Power4.easeOut,
    overwrite: 5,
    force3D: 'auto',
    onUpdateParams: ['{self}'],
    roundProps: 'y'
  })
},

//raf is a mixin
raf(cb, e) {
  if (this.rafID) {
    window.cancelAnimationFrame(this.rafID)
  }
  this.rafID = window.requestAnimationFrame(() => this[cb](e))

 

demo there 

code -> https://codesandbox.io/s/1z86xjl6q3 full window -> https://1z86xjl6q3.codesandbox.io/

 

I also tried to animate a nullObject und set the transform onUpdate, but doesn't solved the problem

 

this.innerTweenID = TweenMax.to(this.nullYObject, 1.2, {
  y: this.scrollTo,
  ease: Power4.easeOut,
  overwrite: 5,
  force3D: 'auto',
  onUpdateParams: ['{self}'],
  onUpdate: tween => {
    const scrollTop = Math.round(tween.target.y)
    this.el_body.style.transform =
      'translateY(' + -scrollTop + 'px) translateZ(0)'
  }
})

 

gregor

 

 

 

[Dipscom]

Hey Gregor,

 

Just to chime in, as I have opened all your links and scrolled around a bit but did not see any slowdown here either. I'm on a Macbook, though, not on an iMac. Maybe it's something to do with the machine itself?

[Jonathan]

Hi @gregor

 

Keep in mind when debugging your code using the browser Dev Tools. Chrome and Firefox developers insist that when using dev tools and testing performance, that you must be in incognito or private browsing mode. Since if you are in those modes you can have skewed results due to extensions and other memory leaks.

 

So when testing performance, make sure your in either incognito or private browsing mode so you make sure all extensions are disabled along with cookie and storage.

 

Just my friendly two cents

[Visual-Q]

1 hour ago, Dipscom said:

Just to chime in, as I have opened all your links and scrolled around a bit but did not see any slowdown here either. I'm on a Macbook, though, not on an iMac. Maybe it's something to do with the machine itself?

 

Yeah it's kind of hard to determine the issue since I can't see it on my machine.

 

Blake made a smooth scroller awhile back that might be worth looking at for inspiration. 

 

 

[gregor]

Hi,

 

First thank you all, this is one of the friendliest forums I have been ;)

 

@Jonathan "that you must be in incognito or private browsing mode." Oh valid point ;) I will check that on Monday, I did not think about that.

 

One other question I have read that Tweenmax use raf under the hood. Do I have to excute my function "move" with raf or is that unnecessary?

[Jonathan]

Hi

 

GSAP indeed does use RAF under the hood so there is no need to do that.

 

Feel free to ask any more questions.

 

Happy Tweening