Jump to content
GreenSock

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

anomie

Members
  • Content Count

    12
  • Joined

  • Last visited

Community Reputation

2 Newbie

About anomie

  • Rank
    Member

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. 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
  2. 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.
  3. 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 ScrollT
  4. @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?f
  5. @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
  6. I made a sample of the code above. I'd be very happy if someone could help me with the solution. https://codesandbox.io/s/compassionate-edison-1u5he?file=/pages/index.vue
  7. I have the same problem. I'm using Nuxt, Smooth-scrollbar and gsap's scrollTrigger to create a product, but when I do a page transition with nuxt-link, the page doesn't work as I expected. I think it's a problem with SSR and routing, so I can't make a demo either. Someone please help me😭. The code below is the configuration code for Smooth-scrollbar and ScrollTrigger.scrollerProxy, which are common to both the home page and the destination page. <script> import Scrollbar from 'smooth-scrollbar' import gsap from "gsap" import { ScrollTrigger } from "gsap/
  8. 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.
  9. <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) {
  10. Japan is only polite to the outside world. The Japanese have a rural, totalitarian mindset and are hard on their people. And this text is written using DeepL translation. Glory to the DeepL translation 🙌🙌🙌
  11. Everyone is so kind. Thank you. We don't have such a friendly forum in Japan. I had never heard of the Smooth-scrollbar package before and I was foolishly trying to make my own version of it. This is a re-development of the wheel. I'm going to peruse the documentation for ScrollTrigger.scrollerProxy(). Thank you so much. @Dipscom @akapowl @ZachSaucier
  12. Hi there. I'm a Japanese creator. Please forgive me for my poor English. Thank you for adding the ScrollPlugin. I wanted to add heavy scrolling to the site and give users a special experience. The way to do that is to use document.addEventListener("wheel") to detect how much power you scrolled from event.deltaY and process the value and transform the container class to How to move it. However, we could not benefit from scrollTrigger in this way. How can I benefit from ScrollTrigger? What I want is a way for scrollTrigger to work using the
×