Jump to content


  • Posts

  • Joined

  • Last visited

Everything posted by anomie

  1. 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
  2. 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ใ€ใจๆŒ‡ๅฎšใ™ใ‚‹ใ“ใจใฏใงใใชใ„ใฎใงใ—ใ‚‡ใ†ใ‹๏ผŸ
  3. 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ใ‚’ใƒ‡ใƒขใงๅ‹•ไฝœใ•ใ›ใ‚‹ใ“ใจใŒใงใใ‚‹ใฎใ‹ๆ•™ใˆใฆใใ ใ•ใ„ใ€‚ ใ‚‚ใ—ใ”ๅ”ๅŠ›ใ„ใŸใ ใ‘ใ‚‹ใฎใงใ‚ใ‚Œใฐใ€้ ใ„ๅณถๅ›ฝใ‹ใ‚‰ใ‚ใชใŸใฎๅฅๅบทใ‚’ใŠ็ฅˆใ‚Šใ—ใพใ™๐Ÿ™
  4. 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
  5. 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.
  6. 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.๐Ÿ™‡โ€โ™‚๏ธ
  7. @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
  8. @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
  9. 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
  10. 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>
  11. 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.
  12. <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.
  13. 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 ๐Ÿ™Œ๐Ÿ™Œ๐Ÿ™Œ
  14. 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
  15. 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.