Hi Guys,
Sorry for not attaching a codepen, but i cant find the CDN for CSSRule to work properly.
When Scrolltrigger hits the end of the trigger element it looks like the animation will go to the starting position.
Is it possible to hold the current state when scrollTigger end is hit / out of view
Code example timeline:
let tl = gsap.timeline({
scrollTrigger: {
trigger: shade,
start: "top center",
end: "bottom bottom",
pin: false,
},
});
Code from position:
tl.from(background, {
width: "0",
duration: 1,
ease: "elastic.out(1, 0.3)",
});
Current CSS
&:before {
width: calc(100% + 1.5rem);
left: -20px;
background-color: $primary;
}
Issue: after the end hits, the animation will set back to the from position, but i want to hold the current CSS position.