Video interaction on scroll + clip path animation

[AntonioNB4]

Good morning,
I have created a codepen with the interaction on the video in the scroll and a simple animation with clip path also with scroll trigger. The two interactions together do not work. When the clip path trigger is active the interaction that allows the video to move with the scroll does not work. Conversely, if I deactivate the interaction with the clip path the video scroll works. Is there a possibility to make both work together?

 

See the Pen YzRxpOa by Antonio-Nocella (@Antonio-Nocella) on CodePen

[mvaneijgen]

There are two ways to use GSAP, single tweens, which can only have one .to() .fromTo() or .from() tween as soon as you want more then one tween you'll have to create a timeline. Next to that ScrollTrigger can go on a single tween (same as previous sentence), but as soon as you want more than one tween you have to add the ScrollTrigger logic to the timeline. 

 

When working with ScrollTrigger the best thing to is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging. 

 

If you enable ScrollTrigger again I find it best to enable the markers, to see what it is doing and you can also give each ScrollTrigger an id so you can see which is which. 

 

When tweening between complex strings best is to have the same unit type and the same amount of points. I don't know if it would be better in your case to use percentage based values, because then it becomes responsive. You can also change "clip-path" to clipPath (this is called camelCase, if you have CSS properties with a dash (-) if you want to use them in CSS you remove the dash and make the next character Capital: background-color becomes backgroundColor) 

 

// Below second tween is missing points 
inset(0px 294.913px 141.157px 409.571px)
inset(0px)

// Should look like
// I dont know what the equvilant is for your clip-path
inset(0px 294.913px 141.157px 409.571px)
inset(0px 0px 0x 0px)

 

I have no idea if the following demo is correct, but I've fix the mistakes that were made and now it is doing something. Hope it helps and happy tweening! 

 

See the Pen MWzvJXv?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

I would advise reading the following articles to get a better grasp on how to use GSAP. You are also using the old v2 syntax of GSAP, better is to use the new syntax, see the last link below.

 

[mvaneijgen]

Did some more debugging of your pen. You had end: *=100% in your first ScrollTrigger , which isn't a value you can use I'm aware of. You want both ScrollTriggers to behave the same, so I've given them the same value eg end: +=3000. 

 

You had a .to() tween and after that a .from() tween that animation looked weird to me, so I've changed the .from() tween to a .to() tween. I've also given your figure an initial clip-path with CSS. 

 

I've also placed some comments in your code, be sure to read through them. 

 

See the Pen ZEmJeEx?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[AntonioNB4]

Ok i see, good. For have inverted cli path result i will invert the value ?

[mvaneijgen]

I think? I don't know what effect you're going for. I would remove ScrollTrigger and first focus on the animation, if that is correct you can enable ScrollTrigger again and everything should work as expected. Instead of inverting the values you can change the first tween from a .to() to a .from() and then the second tween is not necessary. Again I don't know what the effect is you're going for, just try playing with the values and .from or .to tweens. 

[AntonioNB4]

The way you did it is the result I was looking for,  but reversing the clip path so instead of tightening in the scroll it widens to show the whole video

[mvaneijgen]

Yes then switching from a .to() to a .from() is all you need right? 

[AntonioNB4]

20 minutes ago, mvaneijgen said:

Yes then switching from a .to() to a .from() is all you need right? 

 Yes it is and i did it.
Do you know why the cli path is only working left and right while the value below is not seen ? In fact the video is not cut  from below by the clip path but is full height to the section. I don't want the video to take the full height of the section it is in.

 

And when i switch the value, the clip path begins to extend with delay. In contrast, when the values were not reversed the clip path was instantaneous

 

See the Pen bGQrWRQ by Antonio-Nocella (@Antonio-Nocella) on CodePen

Edited July 5, 2023 by AntonioNB4

[mvaneijgen]

Probably because your figure element is larger than your video element, no idea why. My advice would be to remove all the JS and first fix the styling of this element before you enable ScrollTrigger again. Below pen the yellow background is the figure element 

 

See the Pen GRwvmYX?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

Personally I've never used the a inset() clip-path I usually create my clip paths with https://bennettfeely.com/clippy/ which creates polygon() paths, so I can't tell you what the limitations are of a inset() clip-path, but this will result in the same issue, because the figure elements is bigger then the viewport 

 

See the Pen VwVzbVQ?editors=0100 by mvaneijgen (@mvaneijgen) on CodePen

[AntonioNB4]

OK I will try as you say. As for the start of the clip path movement, why does it start too late? It moves after a long scroll

 

See the Pen bGQrWRQ by Antonio-Nocella (@Antonio-Nocella) on CodePen

[mvaneijgen]

Remove ScrollTrigger and check your animation. Check out GSdevtools docs for a handy helper.

 

Try debugging it your self and post back here with the issue you have found. I've already giving you a hint in my previous post.

 

See the Pen wvQqeMV?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen