Search the Community

Hi, I am wondering, why my transition animation is just played on my first section and not on the following. I added the same class (.parallax) to both my text boxes. Isn't the animation suppose to play on every (each) element that has the class "parallax" applied to it? See my CodePen. Thank for the help!

Hello! I'm importing ScrollTrigger into a React component and noticed the ScrollTrigger import redlining. I installed gsap with yarn. I tried including the @types/gsap package but I see that all of the types are included in the gsap package already. There is a scroll-trigger.d.ts file in the gsap package but my import can't seem to find it. I've tried importing a few other plugins and they work as expected. Let me know if you have any ideas or if there's any additional info that I can provide. Thanks! Error message: Could not find a declaration file for module 'gsap/ScrollTrigger'. '[directory-name]/node_modules/gsap/ScrollTrigger.js' implicitly has an 'any' type. Try `npm install @types/gsap` if it exists or add a new declaration (.d.ts) file containing `declare module 'gsap/ScrollTrigger';`

Hi folks, I want to use ScrollTrigger for a UI component on a mini-site but I can't come up with the best way to toggle the scroll control between elements, if thats even possible. I understand that the typical use cases is to sequence animations/events to the scrollbar for the page itself, but in this case I am trying to use that as the interface for spinning through some items in a list i.e. on s per container basis instead of the whole page. I've brute forced several combinations but cant find one that works well. The codepen I included is sourced from another developer who had the initial idea I forked from and I have restored it to a point where the basic interaction can be seen. What Im trying to change is make it so 2 of those can be on a page at the same time and use JS to toggle which of the two receives the updates. I saw the "scroller" property in the documentation but there must be something about the relationship of the trigger to the scroller element that im not grok'ing because all the ways I try to combine them i either end up with no scrolling or back to scrolling from the viewport. I was able to get one version to run with 2 on the page but they both update together because both instances react to the triggers. So something like that works if i can just disable one or the oither without having to rebuild the whole thing or lose the state of the animation by doing .disable(). Any assistance would be helpful. Thanks!

Hi! First of all - thanks for the wonderfull ScrollTrigger plugin! It's amazing! Now to my issue: When I try to snap on iOS I get some very laggy scrolling - just like back then with this issue: So now I wanted to know if there is a possibility to pass the autoKill attribute to the snapping. I tried to simply use it but wasn't that lucky I'm building something like this: https://codepen.io/team/pixelart/pen/mdVbobo In this codepen it seems to work, but not in my project (I can't see a difference). First I thought it is caused by the scroll-behavior: smooth, but it still happens after I set it back to auto. Any idea what could cause the lag or how to fix this? Thanks, janein

Hi, I am trying to get the Scroll Trigger to work on my gatsby website. I am a beginner at both Gatsby/React and GSAP so forgive my ignorance. I created a sandbox of how I did this in Gatsby. It works on development build like here on this sandbox but not when I try to go production build. I get this error "failed Building static HTML for pages". Does anyone know what I am doing wrong? Thanks! https://codesandbox.io/s/unruffled-cannon-v5wh4?file=/src/App.js

Hey! First of all, thanks for this great plugin!!! But I have some trouble, when you enter a block, left side should be pinned and it's working good, but after entering every content block I want to remove "-=100" of yPercent of all spans, but all I'm getting only restart animation, not adding "-=100". If you uncomment in css .numbers overflow:hidden; you will understand what I want. What am I doing wrong?

On resize, when disabled, the dom object keeps the animation. I want it reset to its original position when disabled. Updated code below with working resize events let tl = gsap.to(child, {y: -50}), st = ScrollTrigger.create({ trigger: child, start: "top 80%", end: "bottom 10%", scrub: true, animation: tl }); console.log(st.animation); // tween if (Foundation.MediaQuery.atLeast('xlarge')) { st.enable(); } else { st.disable(); } $(window).on('changed.zf.mediaquery', function(event, newSize, oldSize) { if ( newSize == 'large' && oldSize == 'xlarge') { st.disable(); ScrollTrigger.refresh(true); } else if ( newSize == 'xlarge' && oldSize == 'large') { st.enable(); } });