gregor

thank you for your reply. I have used different values for the duration but it won't see have any effects on the animations. It looks for me the same if I replace 10 with 50 or 100. Other question the value 2.74 should just show that I can use any value? Or is this a magic number ?

Sorry, I wasn't precise enough. First I want to split the animation from one timeline to individual scroll triggers because then I have more control over the individual durations. Or is this also with your solution possible? because now the duration is end: "bottom+=100% center" but I can't controll how much of this +100% should take the mask effect and how much the y scrolling of the list. The second part is why I want to pin the black box after the end of the mask animation instead of the whole module is that the list can then be scrolled with the natural scroller instead of moving it with yPercent.

hi @mvaneijgen hope it's ok to ask you again How can I pin the left box after the mask animation is over? I tried it but I failed So that the right column scrolls to the end only with the standard scroller. that would work better later with my mobile version. And if it's not a timeline for both animations I have more control of how much time the mask effect should take this was my attempt https://codepen.io/destroy90210/pen/bGzBEgx?editors=1010

wow thank you so much for this great support

Hi, I have an animation where a circled mask reveals some content. After the mask animation is finished, I want the list to scroll to the end, then remove the pin and continue scrolling the whole module. My problem is that scrolling through the list starts too early or too late.... I played around with the start value, but 'center' starts too early and if I use something else like '60%', the start is completely off compared to the 'center' value.

hi thanks for your help. I have placed the gsap code outside of my directive now it works

ok here we go https://codesandbox.io/s/gsap-scrolltrigger-ihfbg?file=/directives/char-animation.js and many thanks in advance for your efforts :)

sure will do it today :)

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?

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?

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

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

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)

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?