how-to: scrollTrigger (and maybe Flip?) with scrub

[Carpi Coder]

Hi! Thank you for this space. I hope to get help with my problem, and I will be super grateful

https://mccann.fr/en

 

I am trying to achieve the video effect from this website, but I need to go a step further, as I don't want it to stay in the second position and keep there. Instead, I need it to position itself in the third div, right next to the text.

 

You can see my attempt on Codepen:

First: I don't quite understand why the video starts in the second div, if in the HTML it is in the first one and the GSAP effects are in order.

Second: I'm not sure if what I'm doing makes sense or if I am overcomplicating things, and maybe Flip is a good option for this.

 

I tried using Flip, but I couldn't get it to work with ScrollTrigger. I set it up, but ScrollTrigger only started the animation with the duration I set, but it didn't work with Scrub.

 

Also, I'm not sure how using Flip would solve having the video in 3 different positions, not just 2.

 

Lastly, in the example on the McCann website, you can see that the text moves up at a slower speed than the rest, as the video overlaps the same text for quite some time. I also don't know how to achieve that.

 

It would be very helpful if you could take a look and guide me in the right direction.

Thank you very much!

See the Pen pomdprb by carpicoder (@carpicoder) on CodePen

[Carpi Coder]

Added:

An example of how the layout should start:

See the Pen KKLyZvz by carpicoder (@carpicoder) on CodePen

[Carpi Coder]

Update: new pen, now used a timeline, I guess it makes more sense, but still wondering if it's a good idea:

See the Pen VwOrQoj by carpicoder (@carpicoder) on CodePen

[Rodrigo]

Hi @carpicoder and welcome to the GSAP forums!

 

I think Flip's fit() method is the best choice here:

https://gsap.com/docs/v3/Plugins/Flip/static.fit()

 

Here is a simple demo that moves one element to two other different locations using a scrubbed ScrollTrigger instance:

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

 

Hopefully this helps.

Happy Tweening!

[Carpi Coder]

Thank you @Rodrigo! This makes a lot of sense now.

Just out of curosity, any idea or advice to achieve that video's effect overlapping the same text where it came out of?

[Carpi Coder]

Hi @Rodrigo, I'm having a strange behavior.

 

I have this Codepen where everything works just right.

 

But outside of Codepen (locally and on GitHub: https://carpicoder.github.io/gsap-flip-test), the exact same code doesn't work. The "video" div takes the same size than the final target.

 

Here's the GitHub code: https://github.com/carpicoder/gsap-flip-test

 

Does anyone know what the heck could be going on?

 

See the Pen oNRoRMN by carpicoder (@carpicoder) on CodePen

[Rodrigo]

Hi,

 

Honestly I couldn't really tell you. After fiddling with your demo and finding the same behaviour locally, this seems to solve it:

const createTimeline = () => {
  flipCtx && flipCtx.revert();

  flipCtx = gsap.context(() => {
    const secondState = Flip.getState(".video-middle-container");
    const thirdState = Flip.getState(".video-final-container");
    const flipConfig = {
      ease: "none",
      duration: 1,
    };

    const tl = gsap.timeline({
      scrollTrigger: {
        trigger: ".hero",
        endTrigger: ".our-projects",
        start: "bottom bottom",
        end: "bottom bottom",
        immediateRender: false,
        scrub: true,
        markers: true,
      }
    });

    tl
      .add(Flip.fit(".hero-video", secondState, flipConfig))
      .add(
      Flip.fit(".hero-video", thirdState, flipConfig),
      "+=0.5"
    );
    // THIS 👇
    gsap.set(".hero-video", {
      clearProps: "all"
    });
  });
};

Give that a try and let us know how it works.

 

Hopefully this helps

Happy Tweening!

[Carpi Coder]

Hi @Rodrigo, that worked great, thanks for your help and sorry for my late response.

 

Just a final quick question: is there a way to pin the video when it's full-width for like 500px scroll? Or whatever distance I would like to set?

[Rodrigo]

You'll have to juggle a bit with math in order to achieve an exact amount of pixels.

 

Roughly this is how it works:

const flipConfig = {
  ease: "none",
  duration: 1,
  absolute: true
};

tl
  .add(Flip.fit(".hero-video", secondState, flipConfig))
  .add(
    Flip.fit(".hero-video", thirdState, flipConfig),
    "+=1" //  <- Position Parameter
  );

Each instance has a duration of 1 second, then your ScrollTrigger config has a start and end points which can be translated into an amount of pixels, then you can associate one second (duration of each flip) to a number of pixels (keep in mind that both flips will take two seconds). So you can estimate an amount pixels to a number of seconds and use that in the position parameter as shown in the code above.

 

I gave it 1 second and it looks good, but you'll have to play a bit with it. Take a peek a the docs in order to better understand how this works:

https://gsap.com/docs/v3/GSAP/Timeline#positioning-animations-in-a-timeline

 

Hopefully this helps.

Happy Tweening!