[Scroll Trigger (auto scroll back) and animation over shoot]

Thanks for the quick fix and help

[Scroll Trigger (auto scroll back) and animation over shoot]

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

 

 

Thanks a lot for the great help and explanations. 

 

[Scroll Trigger (auto scroll back) and animation over shoot]

@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. 

[Scroll Trigger (auto scroll back) and animation over shoot]

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