deantek

@Rodrigo, thank you very much, it worked ?

Hi, I just recently started using gsap and I don't think I'm doing it right. I tried to replicate the animation from this site: https://deveb.co/ my pen: https://codesandbox.io/s/suspicious-darkness-f21rxt?file=/src/App.js that's what I got, I tried to add more smoothness, like on the site, but it doesn't work out for me, can you explain what I'm doing wrong? I change the ease values but the animation is always a little jerky, how can I fix this?

it seems I didn’t quite understand you, or I didn’t explain it well, I know how to change the background when the first panel reaches 50%, but how to change the background of the next ones so that each panel has its own color, I tried to do this, but the panel changes color only 1 time per black const colors = ['#F5EBFF','#EEF8FF', '#000000'] ScrollTrigger.create({ trigger: "section.black", scroller: ".scroller", start: () => "top -" + (window.innerHeight * 0.5), onEnter: () => { console.log('color', colors[i]) gsap.to("body", { duration: 1, backgroundColor: colors[i], overwrite: 'auto' }); }, onLeaveBack: () => { gsap.to("body", { duration: 1, backgroundColor: i === 0 ? '#ffffff' : colors[i-1], overwrite: 'auto' }); }, invalidateOnRefresh: true })

@akapowl, hi again i have been playing with your example here and i still can't figure out how to change the background when scrolling section.black it has the right element in it and when it reaches 50% i would like to change the background, first step, what i did is that when i reached half of section.orange i changed the color: gsap.to("section.black", { scrollTrigger: { trigger: "section.black", scroller: ".scroller", start: () => "top 50%", onEnter: () => { gsap.to("body", { duration: 1, backgroundColor: "#F5EBFF" }); }, onLeaveBack: () => { gsap.to("body", { duration: 1, backgroundColor: "#ffffff" }); }, invalidateOnRefresh: true } }); but how, I can’t understand how to change the background further, I have already seen examples with several sections, everything can be done simply and clearly through a cycle, but I don’t understand how to do the same, but with one section in 400vh my pen: https://codesandbox.io/s/funny-tereshkova-y2xuk7?file=/src/App.js:1731-2246

thank you very much, for several days I could not understand why it does not work, you helped me a lot

@akapowl, hi, I looked at your answers in this thread and wanted to repeat the same thing that you did here, but already on react, I seem to have completely transferred everything that is needed, but the scroll still does not work correctly if you scroll down, could you tell me where i went wrong? your example: https://codepen.io/akapowl/pen/gOrjVom/a959c4e8955ef38bc4fe43bf7adde621?editors=0010 my try: https://codesandbox.io/s/funny-tereshkova-y2xuk7?file=/src/App.js