Doesn't it work in Nuxt if I set ScrollTrigger.scrollerProxy to the value of this.$refs?

[anomie 2 Likes (Newbie)]

<template lang="pug">
  .container(ref='container')
    .container__wrap
      .hoge
        .hoge__item(style='background:red')
        .hoge__item(style='background:green')
        .hoge__item(style='background:blue')
</template>

<script>
import Scrollbar from 'smooth-scrollbar'
import gsap from "gsap" // eslint-disable-line
import { ScrollTrigger } from "gsap/dist/ScrollTrigger.min.js" // eslint-disable-line

class HorizontalScrollPlugin extends Scrollbar.ScrollbarPlugin {// eslint-disable-line
  static pluginName = 'horizontalScroll'

  transformDelta(delta, fromEvent) {
    if (!/wheel/.test(fromEvent.type)) {
      return delta
    }
    const { x, y } = delta

    return {
      y: 0,
      x: Math.abs(x) > Math.abs(y) ? x : y,
      // x: Math.sign(x || y) * Math.sqrt(x*x + y*y),
    }
  }
}

export default {
  mounted() {
    gsap.registerPlugin(ScrollTrigger)
    this.scrollbarOnTrigger()
    this.animation()
  },
  methods: {
    scrollbarOnTrigger() {
      const el = document.body
      // const el = this.$refs.container
      // const el = this.$('.container')
      Scrollbar.use(HorizontalScrollPlugin)

      const bodyScrollBar = Scrollbar.init(el, {
        damping: 0.1,
        alwaysShowTracks: true,
        continuousScrolling: false,
        delegateTo: document,
        syncCallbacks: true,
      })

      ScrollTrigger.scrollerProxy(el, {
        scrollLeft(value) {
          if (arguments.length) {
            bodyScrollBar.scrollLeft = value
          }
          return bodyScrollBar.scrollLeft
        },
        getBoundingClientRect() {
          return {
            top: 0,
            left: 0,
            width: window.innerWidth,
            height: window.innerHeight,
          }
        },
      })

      bodyScrollBar.addListener(ScrollTrigger.update)
    },
    animation() {
      gsap.utils.toArray('.hoge__item').forEach((el, i) => {
        gsap.to(el, {
          opacity: 0.5,
          scrollTrigger: {
            trigger: el,
            scrub: true,
            horizontal: true,
          },
        })
      })
    },
  },
}
</script>

<style lang="sass" scoped>
.container
  &__wrap
    display: flex
.hoge
  display: flex
  &__item
    height: 100vh
    width: 100vw
</style>

 

Say hello 👋

I'm currently using Nuxt, smooth-scrollbar.js and gsap's scrollTrigger to create a product. The above code is an example of scrolling horizontally when scrolling vertically and the animation moves with ScrollTrigger.

 

However, the above code has a problem: when the value of the variable "el" in the scrollbarOnTrigger function is set to something like this.$refs.container, the scrollTrigger animation doesn't work for some reason.

 

If anyone has the brains to solve this, please answer me.

 

I don't understand English, so I'm relying on DeepL. If there are words I don't understand, please let me know.

[GreenSock 18,872 Likes (Superhero)]

9 hours ago, anomie said:

when the value of the variable "el" in the scrollbarOnTrigger function is set to something like this.$refs.container, the scrollTrigger animation doesn't work for some reason.

It's very difficult to troubleshoot without a minimal demo (like in CodePen), but my best guess is that you only changed "el" to this.$refs.container in one place, but you forgot to change it in the ScrollTrigger too, like trigger: this.$refs.container. If you still need some help, please provide a minimal demo. See https://greensock.com/demo for instructions. 

 

Happy tweening!

[anomie 2 Likes (Newbie)]

Thank you.
I'm wondering if it doesn't work because I'm passing an element that's going to be SSR'd when I pass the element to ScrollTrigger.scrollerProxy, but it didn't work when I wrapped the container class with client-only.
When the container class is passed to init in smooth-scrollbar.js, instead of document.body, smooth-scrollbar.js is angered by the phrase "expect element to be DOM Element, but got .container". It would be.

[anomie 2 Likes (Newbie)]

@GreenSock

Thank you for your comment.

I've made a demo for you, please check it out.

 

https://codesandbox.io/s/compassionate-edison-1u5he?file=/pages/refs.vue

[ZachSaucier 7,162 Likes (Superhero)]

Thanks for the clear demo. Jack was correct, you didn't change the document.body in the beforeDestroy method to this.$refs.box. Working version (for the index page): https://codesandbox.io/s/distracted-lamport-5lfdo?file=/pages/index.vue

[anomie 2 Likes (Newbie)]

@ZachSaucier

 

Maybe I didn't explain it well enough.

If I pass document.body to the value of el in Scrollbar.init and ScrollTrigger.scrollerProxy, it works fine, but if I pass this.$refs.box, it doesn't work.
I wanted to know how to solve this.
Sorry for the poor English. All Japanese don't understand English so I didn't have anyone to teach me🙃.

 

Here's a demo of how it works ideally.

https://codesandbox.io/s/compassionate-edison-1u5he?file=/pages/body.vue

 

This is a less than ideal demo.

https://codesandbox.io/s/compassionate-edison-1u5he?file=/pages/refs.vue

[anomie 2 Likes (Newbie)]

I thought I'd leave a motive here as well, to help solve the problem.

What I want to do is to build a product based on Nuxt with smooth-scrollbar.js and gsap's scrolltrigger to create a product with interesting scrolling and animation.
However, due to the nature of Nuxt, the smooth-scrollbar works but the scrolltrigger animation doesn't work when making a page transition.
I also read the ScrollTrigger.scrollerProxy page carefully and tried a demo of smooth-scrollbar, but it didn't work😭.

 

However, I also thought I should write the Japanese language documentation for ScrollTrigger, as there is very little written by a third party.

Please give me some good advice.🙇‍♂️

[ZachSaucier 7,162 Likes (Superhero)]

27 minutes ago, anomie said:

if I pass this.$refs.box, it doesn't work.

If you use this.$refs.box instead of document.body everywhere it does work though? Like in the demo that I posted. If it's not working for you please describe how it's not working.

[anomie 2 Likes (Newbie)]

38 minutes ago, ZachSaucier said:

If you use this.$refs.box instead of document.body everywhere it does work though? Like in the demo that I posted. If it's not working for you please describe how it's not working.

Sorry about that, when you set the document.body, a bar appears on the right that shows where you are now. This is.

This is because we're passing alwaysShowTracks: true as the second argument to Scrollbar.init. But the demo I saw didn't have that.
That means that the smooth-scrollbar isn't working.

[ZachSaucier 7,162 Likes (Superhero)]

28 minutes ago, anomie said:

when you set the document.body, a bar appears on the right that shows where you are now. This is.

Ah, you're correct. Sorry about that.

 

Two issues:

• The container that you have the smooth scrollbar applied to is the height of the content. That's why the scrollbar doesn't show like you expect it to.
• You need to set the scroller on the ScrollTriggers that you create since the scroller that you're using isn't the default. In this case scroller: this.bodyScrollBar.

Updated demo: https://codesandbox.io/s/distracted-lamport-5lfdo?file=/pages/index.vue

 

Side note: You can just use x: 400 instead of x: "400px".

[anomie 2 Likes (Newbie)]

37 minutes ago, ZachSaucier said:

Ah, you're correct. Sorry about that.

 

Two issues:

• The container that you have the smooth scrollbar applied to is the height of the content. That's why the scrollbar doesn't show like you expect it to.
• You need to set the scroller on the ScrollTriggers that you create since the scroller that you're using isn't the default. In this case scroller: this.bodyScrollBar.

Updated demo: https://codesandbox.io/s/distracted-lamport-5lfdo?file=/pages/index.vue

 

Side note: You can just use x: 400 instead of x: "400px".

 

Thank you. It has allowed me to resolve an issue that I have been discussing with myself for a long time.On behalf of all GreenSock fans in Japan, I would like to thank you.🙇‍♂️

However, a new issue has come up again.

If the top page slides horizontally and the transition destination is a vertical page, the transition destination doesn't work.

How should we deal with this issue?

 

I've updated the demo above, just press the link on the about page.

https://codesandbox.io/s/compassionate-edison-1u5he?file=/pages/index.vue

[ZachSaucier 7,162 Likes (Superhero)]

I don't believe that issue is related to GSAP so unfortunately we don't have the capacity to debug those sorts of issues. If you have a GSAP question please ask and we'll do our best to help!

[mateuszjanbilko 0 Likes (Newbie)]

Hallo Everybody!

im learning gsap with nuxt and now im trying to do locomotivscroll with scroll triger... and when i do everything like you above... i get this

 

locomotive-scroll.esm.js?fbd6:1661 Uncaught TypeError: Cannot read property 'match' of undefined
    at getTranslate (locomotive-scroll.esm.js?fbd6:1661)
    at eval (locomotive-scroll.esm.js?fbd6:2296)
    at Array.forEach (<anonymous>)
    at _default.addSections (locomotive-scroll.esm.js?fbd6:2295)
    at _default.update (locomotive-scroll.esm.js?fbd6:2509)
    at _default.resize (locomotive-scroll.esm.js?fbd6:2054)
    at eval (locomotive-scroll.esm.js?fbd6:251)

 

 

so i thought... it must be plugin😇

i checked my version and it says... 2.1.3 locomotiv expects higher so i installed gsap from npm.

 

 

this is what i see in dependencies( see pic) and my question is... can it be the reason why it doesnt work?

thx for reading!!

[GreenSock 18,872 Likes (Superhero)]

That error has nothing to do with GSAP - it's something in LocomotiveScroll (not a GreenSock product). Unfortunately it's not really something we can troubleshoot for you. Maybe ask the LocomotiveScroll author? 

[mateuszjanbilko 0 Likes (Newbie)]

1 hour ago, GreenSock said:

That error has nothing to do with GSAP - it's something in LocomotiveScroll (not a GreenSock product). Unfortunately it's not really something we can troubleshoot for you. Maybe ask the LocomotiveScroll author? 

i got it installed now... i dont know why it didnt work erlier:/ sorry