shaneharley

Thanks for this. I was trying to do a whole bunch of other things that was making it way too complicated so I've paired it back and am using your solution. One place I'm getting stuck though... this only seems to work if the sections are 100% width. Any ideas if the sections are only 80% viewport width? (I end up with the last section hitting the left edge of the page, and white space on the right)

Hi! Trying to recreate something like the included codepen, but without manually setting the width of the container. I am planning on using a CMS so want it to automatically be able to adjust based on how many elements there are in the container. Am using nextJS & styled components so not totally sure how to get a codepen up and running but here's what my code looks like The CSS const ExperimentContainer = styled.section` height: 100vh; width: 100vw; ` const BoxWrapper = styled.div` //this is the bit I don't want to have to specify as it will vary depending on how many boxes are within the wrapper width: 480%; // height: 100%; display: flex; flex-wrap: nowrap; overflow-x: auto; &::-webkit-scrollbar { display: none; } ` const Boxes = styled.div` flex: 0 0 auto; width: 80vw; background-color:rgba(201,125,212); box-sizing: border-box; &:nth-child(odd) { background-color:rgba(125,125,212); } ` Greensock const experimentContainerRef = useRef() const boxWrapper = useRef() useEffect(() => { gsap.to(boxWrapper.current, { xPercent: -100, //if I don't specify the width of the BoxWrapper this doesn't work anymore x: innerWidth, scrollTrigger: { trigger: experimentContainerRef.current, start: "top top", end: () => innerWidth * 3, pin: true, scrub: true, }, }) }, []) Codepen from GSAP docs

Think we can ignore this. Looks like I was setting up my gsap.from incorrectly This works ref.current.forEach(el => { gsap.from(el, { scrollTrigger: { trigger: el, start: "top center", }, autoAlpha: 0, delay: 0 }) });

Okay, few other things I've noticed. Works here //this cycles through each section and creates the triggers pageSections.forEach(section => { ScrollTrigger.create({ trigger: section, start: 'top top+=100', markers: true, onEnter: self => checkColorTheme(section), onEnterBack: self => checkColorTheme(section) }); }) } but not here ref.current.forEach(el => { gsap.from(el, { scrollTrigger: el, autoAlpha: 0, start: 'top top+=100', markers: true, delay: 0.5 }); });

Worth noting it also does it if I just use the CDN

Have a bit of an odd problem. From what I can tell my GSAP is working, but when I try to add a start position, and turn on markers, I get a lot of these errors thrown. Weird thing is, the GSAP animations I have setup still work? 'Invalid property markers set to true Missing plugin? gsap.registerPlugin()' I'm using nextJS and importing my GSAP like follows (I also feel like I've tried every version of imports) import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/dist/ScrollTrigger"; gsap.registerPlugin(ScrollTrigger);