gregor Posted September 28, 2021 Share Posted September 28, 2021 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? See the Pen zYrELYe by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
OSUblake Posted September 28, 2021 Share Posted September 28, 2021 Hi gregor! It's too hard to tell what's going on from code snippets, especially with a third party library like locomotive scroll. Do you think can make a minimal demo on CodeSandbox? Link to comment Share on other sites More sharing options...
gregor Posted September 28, 2021 Author Share Posted September 28, 2021 sure will do it today :) Link to comment Share on other sites More sharing options...
gregor Posted September 28, 2021 Author Share Posted September 28, 2021 ok here we go https://codesandbox.io/s/gsap-scrolltrigger-ihfbg?file=/directives/char-animation.js and many thanks in advance for your efforts :) Link to comment Share on other sites More sharing options...
OSUblake Posted September 28, 2021 Share Posted September 28, 2021 ScrollTrigger seems to be working fine, but your trigger has a small height, change it to something bigger and you will see it update. https://codesandbox.io/s/gsap-scrolltrigger-forked-j6967?file=/directives/char-animation.js Your directive gets created before your locomotive-scroll gets created, which messes stuff up. Notice in this demo how it doesn't work if locomotive scroll is created later. Locomotive Scroll with ScrollTrigger scrubbing and pinning (codepen.io) You'll need to find a way to create locomotive scroll first. Maybe try reaching out to locomotive support as it isn't a GSAP product so really can't say how to fix that. 1 Link to comment Share on other sites More sharing options...
gregor Posted September 29, 2021 Author Share Posted September 29, 2021 hi thanks for your help. I have placed the gsap code outside of my directive now it works Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now