Hey GSAP,
first: you are awesome, thank you for these supercool libaries.
We want to try out the new ScrollSmoother an got stuck on the following problem:
We have a transform based animation with a scrollTrigger:
let tl = gsap.timeline({
scrollTrigger:{
trigger: card,
start: "top top",
end: "bottom top",
pinSpacing: false,
pin: true,
scrub: true,
markers: false,
},
defaults: { overwrite: "auto"}
});
tl.fromTo(cardContent, {scale:1, opacity:1}, {scale: 0.8, opacity: 0.2});
tl.to(cardContent, {opacity:0});
To avoid conflicts with the transform values in the parent container animation (like "jumping" elements) , we use
clearProps: true
on the parent containers animation. This works like a charm, BUT:
with using ScrollSmoother, the same effect of "jumping" elements ist back, as ScrollSmoother is based on transforms.
I'm happy for any advice on how to deal with that.
Thanks