Fix title in place

[ImranSayed]

Hi, how do Ii fix the title in place of current slide??? Basically when I start scrolling and next slide reaches center of screen, the title should scroll with it. kinda parallax effects. Please, Thank you for your help.

See the Pen PoBmNNd by wiseone (@wiseone) on CodePen

[Rodrigo]

Hi @ImranSayed and welcome to the GreenSock forums!

 

Sorry but I'm a bit confused by your question. Right now you are basically running the same code twice.

 

First you have this:

gsap.utils.toArray(".slide").forEach((panel, i) => {
  ScrollTrigger.create({
    trigger: panel,
    pin: true,
    pinSpacing: true,
    autoAlpha: 1,
    anticipatePin: 1,
    ease: 'Power2.easeInOut'
  });
});

Then you have this:

$(".slide").each(function () {
  $title = $(this).find(".title");
  console.log($title);

  $commonTl = gsap.timeline({
    scrollTrigger: {
      trigger: $(this),
      start: "top center",
      markers: "true",
      toggleActions: "play reverse reverse reverse"
    }
  });

  $commonTl.fromTo(
    $title,
    {
      yPercent: 200,
      autoAlpha: 0
    },
    {
      yPercent: 0,
      transformOrigin: "0% 100%",
      ease: "power4",
      duration: 3,
      autoAlpha: 1
    }
  );
});

Finally you have this as a global ScrollTrigger configuration:

gsap.registerPlugin(ScrollTrigger);
ScrollTrigger.defaults({
  toggleActions: "restart reverse",
  scrub: 2,
  lazy: true
});

Where lazy is not par of ScrollTrigger's API (or at least is not documented, maybe is meant to be used only internally).

 

So basically your code has three sections that are conflicting with each other probably in one or many ways.

 

I reduced your code to the part that uses jQuery and this is the outcome:

See the Pen qBymjLw by GreenSock (@GreenSock) on CodePen

 

As you can see the title is animating up with the slide, which is what you mention in your post. If not please be as specific as you can and show an existing example that works in the way you intend to make this, so we can guide you in the best possible way.

 

Happy Tweening!