[Problem with pin and transition on Y]

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%
});

[Problem with pin and transition on Y]

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/ ?

[ScrollTrigger animation on changing display]

That's perfect.

So I will force ScrollTrigger.Refresh() when a resize is detected.

Thanks a lot

[ScrollTrigger animation on changing display]

Hi there, 

I'm developing a website with gsap using Vue.JS and combining Lottie Animation and event on scroll with Scroll Trigger.

My transitions works fine translating via x and y axes but if I change the view (from a screen with 1440 x 900 to another or 1920 x 969) without refreshing the page I have some troubles.
If I refresh the page I got no problem because I think the coordinates are calculated one time when initializing the view.

Is there a way to avoid this? 

Thanks
 

[Problem with pin and transition on Y]

Sorry this is my codepen. 

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

[Problem with pin and transition on Y]

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