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.

[antonio-rodrigues]

Jumping into this topic to avoid creating a similar one.

 

I do have the same needs: 

1. Bound to a scroll trigger  is a centered element (30vw); it has a video element inside, object-fit: contain;

2. I took the above examples and successfully added the animation I want

3. Still, the video paused for a fraction and stutters a lot when scrolling 😕

 

Inspiration (check the video in the center column): 

https://spaincollection.com/

 

My adapted Pen:

See the Pen dPbZRGR by antonio-rodrigues (@antonio-rodrigues) on CodePen.

 

 

 

How do I improve the video pauses/stuttering when scrolling?

I removed the onUpdate: (self) callback code and now it's fixed.

Thanks!

 

Edited January 3 by antonio-rodrigues
Found a solution

[GreenSock]

@antonio-rodrigues you may want to check out the helper function (and explanation) here: 

 

And here's a quick implementation (not sure it's exactly what you were looking for, but hopefully it gets you going in the right direction): 

See the Pen JoPOJZy?editors=0010 by GreenSock (@GreenSock) on CodePen.

[antonio-rodrigues]

Thanks!

 

We won't have any interaction with the video. It is set to loop and autoplay.

For now, I am working on the animations of the central element (expands and reveals the full sized, above the fold video), and some extra left + right side companion elements with static images.

 

I will get back here for some more hints for sure 😄

[antonio-rodrigues]

Hi again.

 

I need some hints about pinning two sets of elements.

 

Here's a pen with the current version I could come up with (run at 0.5 or click to open full-page to get the expected effect).

See the Pen RNbyRpr by antonio-rodrigues (@antonio-rodrigues) on CodePen.

 

My goal is to achieve the following step, on the page scroll up:

 

1. The video should move up until it reaches the top of the page
2. In that moment:
   1. The video should be pinned and start to expand to the full width + height of the viewport on scroll;
   2. The companion elements (squares, left and right) should also be pinned;
   3. ... and animate to the left and right sides until they go out of the screen (always keeping the gap to the video margins) 

So far I have managed to make it work until step 2.3.

I am stuck on step 2.2 - I have no idea how to pin the squares.

How can I achieve that?

 

I appreciate any help you can provide.

Thanks
 

[mvaneijgen]

The best thing to do when working with ScrollTrigger 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.  
  
Most of the ScrollTrigger effects you see are just moving things on the y-axis instead of scrolling them, then hooking that animation to ScrollTrigger will give the illusion of scrolling, but they are really just animating! Getting to grips with this knowledge will make it so much easier to create all kinds of effects!

 

So what you want to do is pin everything you want to pin then instead of having the page scroll be the thing that moves the video up, just create a y: -xAmount tween that moves the things up that need to move up, this way you are in full control of when things need to move up, stay in place, do what ever. Again remove ScrollTrigger from your setup and just focus on the animation you want to happen and when that is working like expected add ScrollTrigger back and see how it works on scroll 

 

Hope it helps and happy tweening! 

[antonio-rodrigues]

I am following the suggested approach, but struggling with some issues.

 

Animations only, not scrollTrigger:

See the Pen qEWxYZj by antonio-rodrigues (@antonio-rodrigues) on CodePen.

 

Animations with scrollTriggers:

See the Pen vEBzrrp by antonio-rodrigues (@antonio-rodrigues) on CodePen.

 

As you can see, the clipPath is not smooth when I add the scrollTrigger.

I think I am adding too much complexity, or, the all thing is complex by design and I don't have enough GSAP skills yet to grasp it 😩

 

Thanks!

[mvaneijgen]

It seems like your switching your clip-path measurement suffix on the same elment, when animating complex strings which clip-paths are, you need to stay in the same suffix and also keep a suffix on all values, this way GSAP knows what is changing and doesn't have to guess. So you issue here is that you cant animate from inset(0 40% 0 40%) to inset(0px 0px 0px 0px) you either have to animate % or px and also if you do use % suffix all numbers with this suffix even though 0% is not necessary it will help GSAP keep track of all the different numbers 

 

See my post for more info. Hope it helps and happy tweening!