Start a video on scroll and then when the video ends scale the video using another scrollTrigger

[wayz]

So I have played the video using scrollTrigger but what i want to do next is after the video has stopped I want to scale the video on Scroll. What i end up doing is scaling and playing the video at the same time using a the initial scrolltrigger.

const kill = gsap.context(() => {

//for pinning

gsap.to(SectionPlay, {

scrollTrigger: {

trigger: SectionPlay,

onEnter: () => VideoPlay.play(),

start: "top+=5 top",

pin: true,

markers: true,

},

})

}, SectionPlay)

return () => kill.revert();

[Rodrigo]

Hi,

 

Is a bit difficult to help without a minimal demo, but a video element is just a regular DOM element so you should be able to scale it without any issue.

 

If the problem is to do that after scrubbing the video with GSAP and ScrollTrigger just create a timeline for scrubbing the video and then after the scrubbing instance add one that scales the video, something like this:

const video = document.querySelector("video");

let tl = gsap.timeline({
  scrollTrigger: {
    trigger: "video",
    start: "top top",
    end: "+=300%",
    pin: true,
    scrub: true,
    markers: true,
  }
});

coolVideo.onloadedmetadata = function () {
  tl.to(video,{
    currentTime: coolVideo.duration
  })
  .to(video, {
    scale: 0.7,
    ease: "none",
    transformOrigin: "center center",
  });
};

Just be aware of not using the video as either the trigger element nor the one that gets pinned since you will be scaling it down affecting it's position in the Y axis. Plus is not recommended to animate the element you trigger.

 

Hopefully this helps.

Happy Tweening!

[wayz]

I actually had this in mind

See the Pen gLLVEZ by vailjoy (@vailjoy) on CodePen

where the image itself scales on scroll not the div.

[Rodrigo]

Hi,

 

I'm a bit confused. You mention scaling a video after playing the video but your example uses an image.

 

Please be specific about what you're trying to achieve, what's the issue you're having and post a minimal demo that clearly illustrates the issue.

 

Happy Tweening!