How to scale an element's size up and down - Scroll trigger

[purple-lightsaber]

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
    }
  );

});

 

[Cassie]

Hey there!

 

Timeline's allow you to sequence animations, so you can just add another tween after the first one. By default they'll play back to back.

Something like this?
 

tl.fromTo(targetElement,{
  scale: 0.35,
  opacity: 0.40,
},{
  scale: 0.75,
  opacity: 1,
  duration: 1
})
.to(targetElement,{
  scale: 0.35,
  opacity: 0.40,
});

Hope this helps. ✨

[purple-lightsaber]

@Cassie thank you so much for this, exactly what I was looking for!