У меня есть слайдер сделанный с помощью react scrollMagic, карточки при скролле вниз прокручиваются вправо, но проблема в том, что они должны по вертикали оставаться на месте. А они прокручиваются вниз и остаются посредине большого блока scrollmagic-pin-spacer
. Есть ли возможность уменьшить этот блок, чтобы карточки оставались на месте по вертикали?
Вот как это выглядит:
Вот код который у меня получился
<div className="wide-container">
<div className="sticky-slider" id="sticky-slider">
<Controller>
<Scene
triggerHook="onLeave"
duration="250%"
pin={{ pushFollowers: false }}
offset={-dimensions.height * 1.5}
>
<Timeline
wrapper={<div className="sticky-slider-cont" ref={targetRef} />}
>
<Tween
from={{ x: dimensions.width - dimensions.width / 5 }}
to={{ x: -dimensions.width * 1.5 }}
>
{state.images.map((image, index) => {
return (
<section key={index}>
<StickySlide
text={'test-text'}
key={index}
img={image} />
</section>);
})}
</Tween>
</Timeline>
</Scene>
</Controller>
</div>
<div className="sticky-slider-scrollbar">
<div className="sticky-slider-scrollbar__drag" id="sticky-slider-scrollbar__drag" />
</div>
</div>