Thank you so much Zach!! Both the suggested solutions worked
Btw, here's the timeline code snippet, I'd request you to suggest better way(s) to write the same... I'm not happy about using fromTo and if I don't, I've to uncomment the .set(...) statements, which again I think is unnecessary. I tried doing a normal
.from(this.$refs.picture2, { opacity: 0 }, "-=0.5");)
But this doesn't seem to animate the .picture2 element (I'm sure there's something that I'm not doing correct)...
this.sliderOptionTL = gsap
.timeline({
scrollTrigger: {
trigger: this.sliderContent,
start: "top 50%",
// end: "top top",
toggleActions: "play auto auto reverse",
// scrub: 1,
invalidateOnRefresh: true,
markers: true,
},
})
.set(slides, { clearProps: "all" })
.to(slides, {
x: () => {
return this.sliderContentWidth - this.sliderContentScrollWidth;
},
ease: "power1.inOut",
})
// .set(this.$refs.card1, { clearProps: "all" })
// .set(this.$refs.picture1, { clearProps: "all" })
.to(this.$refs.card1, { opacity: 0.4 }, "-=0.5")
.to(this.$refs.picture1, { opacity: 0 }, "-=0.5")
// .set(this.$refs.card2, { clearProps: "all" })
.fromTo(this.$refs.card2, { opacity: 0.4 }, { opacity: 1 }, "-=0.5")
// .set(this.$refs.picture2, { clearProps: "all" })
.fromTo(this.$refs.picture2, { opacity: 0 }, { opacity: 1 }, "-=0.5");