I want to achieve this [attached photo's title part] scroll motion link here result.

I've tried to implement the same scroll motion with GSAP. codepen link here. Please suggest if you know a better way to implement the scroll up/down motion.

var titleMotion = new ScrollMagic.Controller();

$(".single-wrapper").each(function() {
  let titleBig = $(this).find(".motion-title");

  let tl = new TimelineMax();

  tl.staggerFromTo(titleBig, 1, {
    top: "auto",
    opacity: "0.2"
  }, {
    bottom: "0%",
    opacity: "1",
    ease: Expo.ease
  }, "start")

  new ScrollMagic.Scene({
      triggerElement: this,
      triggerHook: 0.5,
      duration: "10%"
    })
    //.setClassToggle(".single-wrapper", "active")
    .setTween(tl)
    .addTo(titleMotion);
});