Search the Community

This is probably really obvious, but i can't make it work. Basically I adapted the code from the given codepen to my react project but I can't get it to work in the way I want. What I'm trying to do is make use of image sequence animation triggered by scrolling while also snapping to full screen sections. I've managed making these work individually but when I tried combining them is when I ran into trouble. The conclusion I came to is: the way I have it setup now, for the scroll snapping to work is body overflow:hidden and everything is taking place in a container div configured for snapping which is scrolling. Now the canvas animation is not triggering because it is expecting for the window to scroll which is not actually happening it is the div that is. I think the solution should be me directing and giving the right scroller to ScrollTrigger but I can't get it to work. I'm going to share the code below and I thank anyone in advance for any help provided. index.css Home.js Solutions I tried are a combination of the code below: I should mention that using this code above made the animation play trough once upon refreshing the site but it would not respond to the scroller. I'm sorry if the post is breaking any forum rules and if I didn't explain the problem quite as well as I could've.

Hi I want have many sections with 100 percent height and one of sections have many sections itself, Can i have multiple scrolltriggers with scrollsmoth???

Whenever you scroll I am making a function to play the video. The video is playing rough, how can I play it smoothly? I think I should use "scrollerProxy", but I don't know how to apply it.

When you use smooth-scrollbar, React and GSAP ScrollTrigger in multiple React components all animations stop working. Firstly I thought it's Gatsby issue but the same thing happens for pure React. Everything works well if you don't use smooth-scrollbar, also everything works well when you use smooth-scrollbar and store all scrollTrigger animations in one useEffect. But when you move them to other components then all animations stop working. Try to use my codepen example. Animations don't work but when you comment out scrollTrigger object from the "Other" component then it starts to work.

Hey all! First of all, I am designer learning some dev style fighting and I am amazed how many possibilities gsap gives, I was a guy with job related mid-life crisis and gsap allowed me to find enjoyment and excitement, just as 15 years ago when I was just starting my design journey Thanks to everyone that participated and contributed to GSAP! I decided to fight with my portfolio as this was perfect opportunity to practice coding and GSAP animations. My issue is - I've been learning three-js with one of the courses available in the net there and wanted to use it when building my portfolio. There's a part in the course when the author shares his custom scroll code (which is needed to sync positions of meshes in webgl canvas with html divs). Now the hard part I've been fighting with for over a week now: I want to use gsap and scrolltrigger to animate stuff and I can't get this custom scroll to work with scrolltrigger - if I don't specify the scroller proxy it gets all choppy and framrate drops low and when I put scroller proxy the whole structure doesn't work. I've been trying putting different values/names in scroller proxy as part of trial & error, but nothing seems to work Before I wasn't using threejs I was using locomotive scroll and I figured out how to pair it with scrolltrigger pretty easily. But in this instance, I am kind of forced to use this custom scroll code. I attach codepen (image not related ) with one note - somehow the scroll doesn't work in the codepen, but it works on my localhost. Hope I explained everyhthing well enough.

Hello everyone! I was exploring smooth scrolling and scrolltrigger, found beautiful library called asScroll, tryied to add it to my Nuxt.js project. It kinda works, but scroll trigger is updating it's state only when scrolling is stopped, so the animation with scrub was not so smooth. Here is a minimal demo on codesandbox

hi first of all sorry for my english im trying to replicate navigation menu of http://www.alsafarproject.org/en/map ,its kinda cool it has some skew on scrolling and its smooth and its multi stage, for example when you click on countries in menu submenu will comeup with a nice animation. so i try to make it with gsap becuase why not? so here is my long list of question: 1- why my last <li> element is not showing? 2-when i use a low divider in (self.getVelocity/-2000), like -300 when you switch scroll direction fast you will get some choppy skew animation,is there any way to smooth it out like the refreence site? 3- how to achive the submenu transition effect using gsap and vanilla js(by the way i think they use some overflow : hidden trick , but i havent any success for now)? thank you so much for your greate framework.

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

Hello again, I've been using GSAP3' ScrollTrigger plugin for a little while now and managed to make the skew on scroll effect work, which I really enjoyed using. Although it does work perfectly with normal scrolling, I can't seem to make it work while using the SmoothScrollbar.js plugin (https://idiotwu.github.io/smooth-scrollbar/). Please note to the Pen provided: when the SmoothScrollbar is removed, the skew on scroll effect works. I know GSAP and SmoothScrollbar are separate plugins so I'd understand if it just wouldn't work but I hope someone can find a solution. Sincerely, Julius

Hello BEST Team ever, first of All, Thank you very much for this amazing work on GSAP 3 . I have weird issue when I tried to implement smoothscrolling with scrolltrigger. I'm getting this error in the console and the scrolltrigger is failing to trigger any animation with scrolling I'm using this code to connect scrolltrigger with smooth-scrollbars import Scrollbar from 'smooth-scrollbar'; import {gsap} from 'gsap'; import {ScrollTrigger} from 'gsap/ScrollTrigger'; gsap.registerPlugin(ScrollTrigger); export default () => { const scrollContainer = document.querySelector('[smooth-scroll-container]'); const bodyScrollBar = Scrollbar.init(scrollContainer, {damping: 0.075, delegateTo: window}); bodyScrollBar.track.xAxis.element.remove(); bodyScrollBar.setPosition(0, 0); ScrollTrigger.scrollerProxy(scrollContainer, { scrollTop(value) { if (arguments.length) { bodyScrollBar.scrollTop = value; } return bodyScrollBar.scrollTop; }, }); bodyScrollBar.addListener(ScrollTrigger.update); } By the way smooth-scrollbar is working very well sorry for the lack of proper info as I don't know how to address this problem properly. Thanks in advance

Hi everyone, I'm trying to implement some simple scrollTriggered timelines to a project that's using Barba.js for page transitions and locomotive scroll (with [data-scroll-container] as the ScrollTrigger Proxy). I've managed to get it working on first page load however after transitioning to another page the same timelines appear very janky. If you check teh codepen demo you'll see that images scale smoothly on the index but not the about page. I've tried killing all ScrollTrigger instances with Barbas beforeEnter hook but I think I must be doing something wrong when re-initializing locomotive scroll. If anybody has any experience in using these libraries together and has any advice that would be great! Many thanks https://codepen.io/mulegoat/project/editor/XvJVNP

hello everyone! i wanted to show you a little excercise i made applying what i've learn with @Carl on his fantastic ScrollTrigger course. i am having a problem.. everything works fine until i click a button which fires a function that uses the ScrollTo plugin. i did add that button with the intention of giving the user the option to skip the animation (happening as they scroll) and jump to the following scene... its best if you see for yourselves what i mean. since is a VUE project i have all the logic separated on mixins. here is the link to the codeSandbox i made. https://codesandbox.io/s/help-me-world-44mr3 thanks again for reading me.