Problem with pin and transition on Y

[Mauro.ie31]

Hi everyone,

I'm trying to recreate the video effect at the bottom of the page of https://ferrumpipe.com/

In particular I want the to make a transition on vertical axis of the video, when it's container reaches the top of the windows I wan to pin it and keeps scrolling for 600px then redus his dimensions from 100vw and 100vh to 80vw and 80vh

 

 

I'm sorry if I was not clear but it is my first time.

Thanks everyone.

See the Pen NWrRgvG by mauroie31 (@mauroie31) on CodePen

[ZachSaucier]

Hey Mauro and welcome to the GreenSock forums.

 

Can you please create a minimal demo of your issue on CodePen if you'd like our help debugging? Remove everything that's not directly related to the issue you're asking about. You can learn how to do so in this thread:

 

[Mauro.ie31]

Sorry this is my codepen. 

I want to add the transition on y axis on video element.

[ZachSaucier]

Are you just saying you want to keep the video pinned while the scaling happens? 

 

A few notes:

• You misspelled height  But based on the height: auto !important in your CSS it looks like you don't want to change it. So just remove that line then.
• Are you sure you want to use width and height and not scale? Scaling performs better but will have a different effect in terms of how other elements are positioned. Using scaling also would allow you to use a transform-origin instead of having to animate the margin.
• To answer the question you're asking, you could either change the start of the second ScrollTrigger to a start value before the end of your first ScrollTrigger or you could use just one ScrollTrigger but attach an animation that has some empty space for the first part of it (so the dimension change occurs later in the ScrollTrigger). Here's a way of doing it using scaling and one ScrollTrigger:
  

  See the Pen WNxGZKB?editors=0110 by GreenSock (@GreenSock) on CodePen

[Mauro.ie31]

Thanks for the reply.

Surely using the scale property improve the performance on my website.

Is it possible to add a transition o y at element #feature and then pin it as it appears at the bottom of the page https://ferrumpipe.com/ ?

[ZachSaucier]

38 minutes ago, Mauro.ie31 said:

Is it possible to add a transition o y at element #feature and then pin it as it appears at the bottom of the page https://ferrumpipe.com/ ?

Sorry, I don't understand the question. Can you try again? Maybe with a demo that clearly shows what you're asking?

[Mauro.ie31]

18 hours ago, ZachSaucier said:

Sorry, I don't understand the question. Can you try again? Maybe with a demo that clearly shows what you're asking?

Just add 'y : -300 ':

.to('.video-js', {
  scale: 0.6,
  y: -300,
  // width: '60vw',
  // marginleft: '10vw',
  duration: 0.4 // The last 40%
});

[ZachSaucier]

17 minutes ago, Mauro.ie31 said:

.to('.video-js', {
  scale: 0.6,
  y: -300,
  // width: '60vw',
  // marginleft: '10vw',
  duration: 0.4 // The last 40%
});

That works? Again, I don't understand the issue.