Hi everyone!
I'm trying do to a timeline (not the GSAP feature, but a real event timeline) and I'm basically keeping one element fixed (the "20" from the year "2010") and by scrolling I want to change the side text (in the left), the background image and the current year by using scrub.
As you can see in my CodePen, the first slide transition is nice, but I guess it's because the first two sections contains the same background image. So when i change from section 2 to section 3 it goes very weird and don't transition nice. I notice a curious thing too: when I set the "pin:true", the fixed element is dropped to background, so I can't use this prop. All I want is the transition to go smoother like in the first one.
Does anyone have any solution for this? I appreciate all the input that you can give!
PS: I'm doing something like this (https://15years.melonfashion.ru/en/) you can see a similar timeline in the 4th section of this website.
Thanks in advance