Jump to content
GreenSock

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

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

Recommended Posts

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

Link to post
Share on other sites
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!

  • Like 1
Link to post
Share on other sites

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.

Link to post
Share on other sites

@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

Link to post
Share on other sites

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.🙇‍♂️

Link to post
Share on other sites
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.

Link to post
Share on other sites
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.

Link to post
Share on other sites
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".

  • Thanks 1
Link to post
Share on other sites
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

Link to post
Share on other sites

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!

Link to post
Share on other sites

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

Bildschirmfoto 2020-10-25 um 02.05.18.png

Link to post
Share on other sites

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? 

  • Like 1
Link to post
Share on other sites
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

 

 

Link to post
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×