Scroll Trigger (auto scroll back) and animation over shoot

[simgy]

Hi everyone,

 

I am struggling at a video scroll animation. 

I would like to change the size of the video depending on the scrolling of the user. Scrolling down, increasing, scrolling up, decreasing. This works in general great. 

But I have 2 problems. 

1.: When I do not scroll completely to the end, the page scrolls automatically back to the top.

2.: The boarder radius overshoots at the end to 0px and comes right after back to 1.5 rem. 

 

What am I doing wrong? I tested it on Safari and Chrome (Mac OS)

 

See the Pen PogqBQB by simgy (@simgy) on CodePen

[mvaneijgen]

Hi @simgy welcome to the forum and thanks for being a club member!

 

Instead of animating the video directly I would animate the wrapper element. I have the feeling this is easier on the browser, but I'm not sure. Below en example with GSDevTools without ScrollTrigger so that we first can focus on the animation. I'm not sure what you wanted to do with your second tween, because scale: 1, is the browsers default and 1.5rem was already set in CSS, so you're .from() tween animates to those values, so your second tween was animating nothing and just taking up space on the timeline 

 

See the Pen WNWvKBV by mvaneijgen (@mvaneijgen) on CodePen

 

Then the ScrollTrigger part. I’ve placed some comments in your JS to better explain things, please be sure to read through them! Is this what you're looking for? Hope it helps and happy tweening! 

 

See the Pen yLrNqdY by mvaneijgen (@mvaneijgen) on CodePen

[simgy]

@mvaneijgen Thank you very much for the great explanation and demos and the super fast response. This helps a lot and it seems as a good idea to animate the wrapper.

 

It works much better and I understand the issue with the snap now better. Thank you. The only thing which still doesn't work perfectly, is the radius of the border. Once I reach the final position (by scrolling and by the snap = 1 ), the video will have for a short moment a radius or 0 and jumps back to the 1.5rem. It takes maybe 0.5 seconds. 

 

This is what I tried to get rid of with the last line of code 

 .to(".video_wrapper video", { scale: 1, borderRadius: "1.5rem" });

but I understand that this doesn't do anything.

 

Any ideas? I scaled the CodePen Example of you to 0.5x and you can see it jump a little bit in the corners as well. 

[mvaneijgen]

I thought it was fixed, but I see it happen now again. I think the browser doesn't like rendering (or animating rem units) I've tested it with random px units and I don't see the issue. 

 

You're rem unit of 100 is also larger then the element can display, so for around half of the animation the border radius doesn't animate. 

10 minutes ago, simgy said:

but I understand that this doesn't do anything.

Nope the first tween already animate to those values, so setting it again will just mean for 0.5 the animation does nothing while it animates from 1 to 1 and ("1.5rem"). 

 

I'll mark the topic to see if anyone else has some insight on rem units. 

[simgy]

You are right. It seems to be the rem value. It works smooth with px. 

 

 

Thanks a lot for the great help and explanations. 

 

[GreenSock]

Yeah, that was an issue specific to rem units and it should be resolved in the next release which you can preview at:

https://assets.codepen.io/16327/gsap-latest-beta.min.js

 

(you may need to clear your cache). 

 

Sorry about any confusion there. 

[simgy]

Thanks for the quick fix and help