Hi guys, I'm probably doing something wrong but quick question.
I want property backgroundPositionY to have delay and start a bit later but property opacity to work normal 0-100%
So basically I want it to start fading out with opacity and somewhere in beetween at 50% to start moving its position
here's the code that works so far
gsap.fromTo(
element.querySelector(".moon-bg2"),
{
opacity: 0,
backgroundPositionY: "50%"
},
{
opacity: 1,
backgroundPositionY: "100%",
scrollTrigger: {
trigger: element.querySelector(".sec-1"),
start: "top top",
end: "center center",
markers: false,
scrub: true
}
}
);
and here is what I tried to do:
gsap.fromTo(
element.querySelector(".moon-bg2"),
{
opacity: 0,
backgroundPositionY: "50%"
},
{
opacity: 1,
startAt: {y: "300px", backgroundPositionY: "100%"}, // <<--- this this here
scrollTrigger: {
trigger: element.querySelector(".sec-1"),
start: "top top",
end: "center center",
markers: false,
scrub: true
}
}
);
so if anyone wants to take a look I would be very tankful,
do tell me if you need more info
