Jump to content

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


  • Posts

  • Joined

  • Last visited

gregor's Achievements

  1. hi thanks for your help. I have placed the gsap code outside of my directive now it works
  2. ok here we go https://codesandbox.io/s/gsap-scrolltrigger-ihfbg?file=/directives/char-animation.js and many thanks in advance for your efforts :)
  3. I'm using locomotive for smooth-scrolling and gsap for animations. Now I wanted to create a directive to animate some typo. My application contains this code to create the smooth-scroller and combine it with gsap (copied from codepen.io/GreenSock/pen/zYrELYe) const scroller = new this.$locomotiveScroll({ el: document.querySelector('.js_smoothscroller'), smooth: true }); scroller.on('scroll', () => { this.$ScrollTrigger.update() }) this.$ScrollTrigger.scrollerProxy('.js_smoothscroller', { scrollTop(value) { return arguments.length ? scroller.scrollTo(value, 0, 0) : scroller.scroll.instance.scroll.y }, getBoundingClientRect() { return { left: 0, top: 0, width: window.innerWidth, height: window.innerHeight} }, }) this.$ScrollTrigger.addEventListener('refresh', () => scroller.update()) this code works fine now I want to create a directive to easily reuse some types of animations. const init = { bind: (el, binding, vnode) => { ... vnode.context.$ScrollTrigger.create({ trigger: '.heading', scroller: ".js_smoothscroller", onEnter: () => { console.log('inviewport') } onUpdate: () => { console.log('doesn't get updated')}, start: "top bottom", end: "top top" }) } } Vue.directive('char-animation', init) The directive gets executed once at load, but never fires the onUpdate or onEnter function on scroll Is the prop „scroller: .js_smoothscroller“ enough that it knows where to listen for updates? If I resize the window the onUpdate function gets fired. What I'm missing?
  4. 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?
  5. 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
  6. 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...
  7. 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)
  8. 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?