gregor

Members
  • Content Count

    5
  • Joined

  • Last visited

Community Reputation

0 Newbie

About gregor

  • Rank
    Newbie
  1. gregor

    Animation smoother with onUpdate function

    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?
  2. gregor

    Animation smoother with onUpdate function

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

    Animation smoother with onUpdate function

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

    Animation smoother with onUpdate function

    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)
  5. 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?