coinbb

Code: https://stackblitz.com/edit/react-1idzcn?file=src%2FApp.js,src%2Fstyle.css,src%2Findex.js I am trying to use the text plugin to change text in a div based on position of a slideshow controlled by scroll trigger. I've got it working but there is a pause when switching slides, that delays the text change even on slides that will have the same heading. I think this is because I am using a switch case and was wondering if anyone knew of a more efficient way to do this? Ideally the trigger would be once a new color is displayed and different slides of the same color would not affect the text.

@Cassie thank you!! I think this is the last question ill have ? but when adding a new image to the array, the space in the container is accounted for and snap is working for the extra image, but I can't get any new images to actually display in the container, though the image will work if its in one of the first three positions. What in the code is accounting for the images actually displaying? Here is a fork with a new image added to the array: https://stackblitz.com/edit/react-zr4u3c?file=src%2FApp.js,src%2Findex.js

@GSAP Helper Thank you for the help! That got the scroll trigger to work properly, it seems i've just got the wrong animation again ? Any Idea why this may be happening? I tried to follow the code from the codePen on my original post @Rodrigo helped me with but now it seems to just be snapping vertically down the page corresponding with the number of images in the array but no horizontal movement. https://stackblitz.com/edit/react-za5wss?file=src%2FApp.js

@Rodrigo I've updated my codepen and it works perfectly. Thank you so much for your kindness and guidance! I am now trying to convert this to React with typescript and am following along with one of your other code sandbox's(https://codesandbox.io/s/lively-sunset-9ifwq?file=/src/App.js) and I was curious in typescript what type would you set panel to (line 12)? Ive set index to number, but everything I try for panel gives an "Type 'x' is not assignable to type 'never' error(line 13). I am confused because my original problem I was having, the scroll trigger not working properly, happened on a react file, without using ref's I just used useEffect and was at least getting some scroll animation, but once I added my changes no scrolling was happening at all the only element of scroll trigger working was the markers. Do you need to use ref's for this to work on react or can it just be done with useEffect? Edit: I've tried to recreate it in a jsx file and the animation is totally different https://stackblitz.com/edit/react-za5wss?file=src%2FApp.js

I am new to GSAP and after exploring some basics I wanted to try and implement one of the full page scroll trigger examples, but on a smaller scale. My idea is once the thingsContainer reaches the bottom of the page the scroll trigger will start horizontally scrolling through the images, snapping to each image, so they are displayed as the first image is (with the background of the container visible on all sides) It is kind of working but there is one issue: The snap works properly for the first image, then instead of cycling through, it snaps in between the second and third image. Also the first image seems to be slightly higher than the other two. I'm wondering if the error is happening because of the 1rem spacing between the grid items, and how you would account for this?