[how to add smooth animation?]

@Rodrigo,

thank you very much, it worked 🙂

[how to add smooth animation?]

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?

[ScrollTrigger sidebar pinned overlaid sections]

1 hour ago, akapowl said:

 

Если вы хотите, чтобы он запускался в зависимости от хода очистки временной шкалы для изображений, вам нужно установить начало в соответствии с началом и концом этого ScrollTrigger. Посмотрите, как они рассчитываются для ScrollTrigger в цикле forEach?

 

 

Первая панель имеет индекс 0, поэтому ее начало фактически равно 'top -0', а ее конец находится на высоте одного окна после этого.

 

Итак, если вы хотите вызвать что-то, когда прогресс этого вычищенного ScrollTrigger равен 0,5, это будет означать половину высоты окна с тем же элементом триггера, так что...

 

 

 

 

 

 

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
})

 

[ScrollTrigger sidebar pinned overlaid sections]

@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

[ScrollTrigger sidebar pinned overlaid sections]

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

[ScrollTrigger sidebar pinned overlaid sections]

@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: 

See the Pen a959c4e8955ef38bc4fe43bf7adde621?editors=0010 by akapowl (@akapowl) on CodePen

my try:
https://codesandbox.io/s/funny-tereshkova-y2xuk7?file=/src/App.js