reynato.tokyo

Additions After adding the code below to the bottom of the JS code, the desired behavior was achieved, but the first text element was lost. I'm not sure why. ? "Scroller-start" works, how can I control it on a per-item basis? 追記 下のコードをJSのコードの一番下に追記したら目的の動作は近づいたが、初めのテキストの要素が無くなってしまった。どうしてだろう。 "Scroller-start "は動作しますが、アイテムごとに制御するにはどうしたらいいですか？ const el = document.querySelectorAll('.gallery__works__item')[3] el.style.border = '1px solid red' ScrollTrigger.create({ scroller: '.gallery', trigger: el, horizontal: true, markers: true, onToggle: (self) => console.log('toggled, isActive:', self.isActive), }) https://codepen.io/usagino/pen/OJWRrjg

thx @akapowl I was able to scroll using the method you showed me. Thanks for sharing the demo too. But the first calculation of the trigger looks very difficult. The markers are also vertically oriented. Is it not possible to specify the start value as "left" for each item like in the traditional ScrollTrigger? 教えていただいた方法でスクロールすることができました。 デモも見せていただきありがとうございます。しかし、最初のトリガーの計算はとても難しそうですね。 マーカーも縦長ですし。 従来のScrollTriggerのように、アイテムごとに開始値を「left」と指定することはできないのでしょうか？

Hello to everyone overseas. It's 2:00 in the middle of tonight in Japan. Thanks to remote work, I can work until this time. I would like to animate with ScrollTrigger, but apparently it is difficult with the demo I made. I wondered how I could do it, and what I ended up with was ScrollTrigger.proxy, but I read the documentation and didn't understand it. Well, the reason is that I can only read English through DeepL. .... If there are any kind-hearted Gsapers out there, please let me know how to get the ScrollTrigger working in the demo. If you can help me, I will pray for your health from a faraway land. Thank you very much? 海外の皆さん、こんにちは。日本は今夜の2時です。 リモートワークのおかげで、この時間まで仕事ができます。 ScrollTriggerでアニメーションをしたいのですが、私の作ったデモではどうやら難しいようです。 どうすればいいんだろうと考えて、行き着いたのが"ScrollTrigger.proxy"だったのですが、公式のドキュメントを読んでもよくわかりませんでした。 まあ私がDeepL越しでしか英語を読めないのが原因なのですが。。。。 もし心優しいGsaperがいたら、どうすればScrollTriggerをデモで動作させることができるのか教えてください。 もしご協力いただけるのであれば、遠い島国からあなたの健康をお祈りします?

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

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.

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

@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

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

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/dist/ScrollTrigger.min.js" export default { data() { return { bodyScrollBar: null, } }, mounted() { gsap.registerPlugin(ScrollTrigger) this.scrollbarOnTrigger() this.animation() }, beforeDestroy() { console.log('destroy') this.bodyScrollBar.destroy(document.body) this.bodyScrollBar = null }, methods: { scrollbarOnTrigger() { this.bodyScrollBar = Scrollbar.init(document.body, { damping: 0.1, alwaysShowTracks: true, delegateTo: document, }) const bodyScrollBar = this.bodyScrollBar bodyScrollBar.setPosition(0, 0) bodyScrollBar.track.xAxis.element.remove() ScrollTrigger.scrollerProxy('body', { scrollTop(value) { if (arguments.length) { bodyScrollBar.scrollTop = value } return bodyScrollBar.scrollTop }, scrollLeft(value) { if (arguments.length) { bodyScrollBar.scrollLeft = value } return bodyScrollBar.scrollLeft }, }) }, }, } </script>

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.

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

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

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

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 code I wrote in codepen. Wise people, please tell me how to solve this problem.