Clipping a video which is to be animated to an already animated image

[RLM]

https://codesandbox.io/s/frosty-orla-ygc7h4 ---> code

 

In this code, I want to clip the video of vs code inside the screen of the laptop.

I am attaching the desired result image. (link: https://drive.google.com/file/d/1SmZvHDxxXdfxLJIgVNfy-7SjWpt5HBSN/view?usp=sharing ).

Also after clipping this video I have to animate it with ScrollTrigger so that video plays with scrolling.

Please help me figure this out, I have been trying to do this all day 

Edited June 14, 2023 by RLM

[Rodrigo]

Hi,

 

In your example the code image and the notebook are not aligned properly, there is basically no CSS in your example, just this:

.App {
  font-family: sans-serif;
  text-align: center;
}

As much as we love to help, we don't have the time resources to create custom solutions for our users, especially create/solve HTML and/or CSS problems for them.

 

Also this is an issue as well:

let tl = gsap.timeline();
tl.fromTo(
  mbEl,
  {
    scale: 1
  },
  {
    scale: 0.75,
    scrollTrigger: {
      trigger: hivEl,
      markers: true,
      start: "clamp(top center)",
      end: () => `clamp(bottom+=${mbEl.height * 8} top)`,
      onEnter: () => {
        mbEl.style.top = "0px";
      },
      onEnterBack: () => {
        mbEl.style.top = "0px";
      },
      scrub: 1,
      pin: mbEl
    }
  }
);

ScrollTrigger configurations shouldn't go on an instance inside a Timeline. The reason is that it creates a logic problem. A GSAP Timeline controls the playhead position of the instances that you add to the timeline. ScrollTrigger on the other hand controls the playhead position of GSAP instances based on the current scroll position, so in this case you have both ScrollTrigger and the Timeline fighting for setting the position of that instance's playhead resulting in unexpected behaviour. When using Timelines just add the ScrollTrigger configuration to the timeline:

let tl = gsap.timeline({
  scrollTrigger: {
    trigger: hivEl,
    markers: true,
    start: "clamp(top center)",
    end: () => `clamp(bottom+=${mbEl.height * 8} top)`,
    onEnter: () => {
      mbEl.style.top = "0px";
    },
    onEnterBack: () => {
      mbEl.style.top = "0px";
    },
    scrub: 1,
    pin: mbEl
  }
});
tl.fromTo(
  mbEl,
  {
    scale: 1
  },
  {
    scale: 0.75,
  }
);

For scrubbing video with ScrollTrigger, please refer to these threads:

 

 

Finally in this cases is far better to get everything working without ScrollTrigger. Once you have the HTML/CSS in the way you need and your GSAP animation works how you intend, only then you plug ScrollTrigger to the mix:

Hopefully this helps.

Happy Tweening!

[RLM]

Sorry for no CSS, but actually I have written no CSS yet in my local environment and the image and video are in the correct position, so I thought that the same should work in sandbox, maybe the screen resolution changes in sandbox's preview.

As you said, I should not put ScrollTrigger configurations in an instance inside a Timeline, but when I am doing this,

let tl = gsap.timeline({
scrollTrigger: {
trigger: hivEl,
markers: true,
start: "clamp(top center)",
end: () => `clamp(bottom+=${mbEl.height * 8} top)`,
onEnter: () => {
mbEl.style.top = "0px";
},
onEnterBack: () => {
mbEl.style.top = "0px";
},
scrub: 1,
pin: mbEl
}
});
tl.fromTo(
mbEl,
{
scale: 1
},
{
scale: 0.75,
}
);

all I am getting is a blank screen. Can you help me why am I getting a blank screen?

 

 

[Rodrigo]

Hi,

 

We can't really debug based on a few lines of code you pasted. On top of that the codesandbox link is not updated, is the same as it was before so there is no difference there.

 

Finally your animation is just tweening the scale of the laptop, nothing more. I completely removed the ScrollTrigger part of your codesandbox example and the elements are not positioned as they should be.

 

Unless you provide a minimal demo that actually shows the problem you have (something your current example clearly doesn't do) we can't really help you.

 

Happy Tweening!

[RLM]

Hi,

Sorry earlier I wasn't able to showcase what problem I have, but now I can share it properly.

The misalignment of the laptop and the video with respect to the screen, that you said earlier, is maybe a feature or a bug in sandbox.

( Please to preview the app, open the preview of the website on a new tab.)

To fix that so that we can see the images & videos aligned properly with the viewport, we need to inspect the app running on the localhost/preview in sandbox and then we need to click ->"toggle device toolbar". After that select the dimensions as Responsive and stretch the viewport to the right.

Then just zoom out a bit and we can see that everything is aligned. Maybe BTS, sandbox do some changes in the resolution. Now that this is fixed.

 

Following is the link to the code --> 

https://codesandbox.io/p/sandbox/sharp-sutherland-vcjvnw?welcome=true

The code is in the file --> src/components/intro/index.jsx

 

As you said, I should put ScrollTrigger configurations inside a Timeline, but when I am doing it,

let tl = gsap.timeline({
scrollTrigger: {
trigger: hivEl,
markers: true,
start: "clamp(top center)",
end: () => `clamp(bottom+=${mbEl.height * 8} top)`,
onEnter: () => {
mbEl.style.top = "0px";
},
onEnterBack: () => {
mbEl.style.top = "0px";
},
scrub: 1,
pin: mbEl
}
});
tl.fromTo(
mbEl,
{
scale: 1
},
{
scale: 0.75,
}
);

all I am getting is a blank screen. Can you help me why am I getting a blank screen?

[RLM]

3 hours ago, RLM said:

Hi,

Sorry earlier I wasn't able to showcase what problem I have, but now I can share it properly.

The misalignment of the laptop and the video with respect to the screen, that you said earlier, is maybe a feature or a bug in sandbox.

( Please to preview the app, open the preview of the website on a new tab.)

To fix that so that we can see the images & videos aligned properly with the viewport, we need to inspect the app running on the localhost/preview in sandbox and then we need to click ->"toggle device toolbar". After that select the dimensions as Responsive and stretch the viewport to the right.

Then just zoom out a bit and we can see that everything is aligned. Maybe BTS, sandbox do some changes in the resolution. Now that this is fixed.

 

Following is the link to the code --> 

https://codesandbox.io/p/sandbox/sharp-sutherland-vcjvnw?welcome=true

The code is in the file --> src/components/intro/index.jsx

 

As you said, I should put ScrollTrigger configurations inside a Timeline, but when I am doing it,

let tl = gsap.timeline({
scrollTrigger: {
trigger: hivEl,
markers: true,
start: "clamp(top center)",
end: () => `clamp(bottom+=${mbEl.height * 8} top)`,
onEnter: () => {
mbEl.style.top = "0px";
},
onEnterBack: () => {
mbEl.style.top = "0px";
},
scrub: 1,
pin: mbEl
}
});
tl.fromTo(
mbEl,
{
scale: 1
},
{
scale: 0.75,
}
);

all I am getting is a blank screen. Can you help me why am I getting a blank screen?

The problem I was getting after putting the scrolltrigger configs inside a timeline is now resolved.

Now the only problem I have is of pining the helper1 video inside the mbp image and make both of them animate using scorllTrigger.

[RLM]

4 hours ago, RLM said:

Hi,

Sorry earlier I wasn't able to showcase what problem I have, but now I can share it properly.

The misalignment of the laptop and the video with respect to the screen, that you said earlier, is maybe a feature or a bug in sandbox.

( Please to preview the app, open the preview of the website on a new tab.)

To fix that so that we can see the images & videos aligned properly with the viewport, we need to inspect the app running on the localhost/preview in sandbox and then we need to click ->"toggle device toolbar". After that select the dimensions as Responsive and stretch the viewport to the right.

Then just zoom out a bit and we can see that everything is aligned. Maybe BTS, sandbox do some changes in the resolution. Now that this is fixed.

 

Following is the link to the code --> 

https://codesandbox.io/p/sandbox/sharp-sutherland-vcjvnw?welcome=true

The code is in the file --> src/components/intro/index.jsx

 

As you said, I should put ScrollTrigger configurations inside a Timeline, but when I am doing it,

let tl = gsap.timeline({
scrollTrigger: {
trigger: hivEl,
markers: true,
start: "clamp(top center)",
end: () => `clamp(bottom+=${mbEl.height * 8} top)`,
onEnter: () => {
mbEl.style.top = "0px";
},
onEnterBack: () => {
mbEl.style.top = "0px";
},
scrub: 1,
pin: mbEl
}
});
tl.fromTo(
mbEl,
{
scale: 1
},
{
scale: 0.75,
}
);

all I am getting is a blank screen. Can you help me why am I getting a blank screen?

Wait now I am again facing the misalignment issue.

I'll solve it and come back later.