I'd like to copy this site's hero, the video expands but I'd also like it to scale down in size right after.
https://www.basedesign.com/
I've got the GSAP code working for the scaling up, but how do you add the scale down scroll trigger after the first one is complete?
$(".sticky-circle_wrap").each(function (index) {
let triggerElement = $(this);
let targetElement = $(".sticky-circle_element");
let tl = gsap.timeline({
scrollTrigger: {
trigger: triggerElement,
// trigger element - viewport
start: "top top",
end: "bottom bottom",
scrub: 1
}
});
tl.fromTo(
targetElement,
{
scale: 0.35,
opacity: 0.40,
},
{
scale: 0.75,
opacity: 1,
duration: 1
}
);
});