GSAP skew scrub animation

[vierless_julian]

Hi guys, I am trying to build an animation similiar to the top of this page:

https://web.archive.org/web/20230301003141/https://experiencewelcome.com/

 

The video transforms into position. However I am having problems with the correct code. When I put skew into the JS, it says I have a missing plugin or the variable is wrong. All I put was "skew: 0," but it is unknown for some reason.

 

Can someone help here?

[GreenSock]

Did you mean skewY or skewX maybe? That effect may also be done using something like rotationY perhaps. 

 

If you still need help, please make sure you provide a minimal demo (like a CodePen) and we'd be happy to take a peek. 

[Rodrigo]

Hi,

 

Jack is right, if you inspect that element using dev tools you'll see that the effect is achieved using Skew and Scale. Here is a simple copy/paste of the styles being applied:

will-change: transform;
transform: translate3d(10.2232vw, 3.40772vw, 0px) scale3d(1.59635, 1.59635, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 1.18456deg);
transform-style: preserve-3d;

Hopefully this helps.

Happy Tweening!

[vierless_julian]

Thanks for your help guys!

 

I came already pretty close to the effect using this code:

 

gsap.registerPlugin(ScrollTrigger);

gsap.fromTo('.video-container',
{
  x: '0',
  y: '0',
  z: 0,
  skewX: '0deg',
  skewY: '8deg',
  scaleX: 1,
  scaleY: 1,
  rotation: 0,
  perspective: 0,
},
{
  x: '12vw',
  y: '4vw',
  z: 0,
  skewX: '0deg',
  skewY: '0deg',
  scaleX: 1.7,
  scaleY: 1.7,
  rotation: 0,
  perspective: 0,
  duration: 1,
  scrollTrigger: {
    trigger: '.video-container',
    start: 'top 50%',
    end: 'top 20%',
    scrub: true,
    toggleActions: 'restart none none none',
  },
});

For me the output that GSAP gives the container is the following:
 

transform: perspective(0.5px) translate3d(11.804vw, 3.9347vw, 0px) skew(0deg, 0.1307deg) scale(1.6886, 1.6886);

I don't know why there is the "perspective" in there and also I don't get "scale3d" if this changes something...

Also, when I scroll the animation feels like it's waiting for around 500ms - 1000ms and then snaps to the endpoint. 

 

Here is where I am working on:

https://b124w16.myraidbox.de/

 

Maybe you have some ideas to improve my current animation?

[mvaneijgen]

Can you create a minimal demo on something like Codepen.io, so that we can inspect and modify the code. 

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

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