simgy

Thanks for the quick fix and help

You are right. It seems to be the rem value. It works smooth with px. Thanks a lot for the great help and explanations.

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

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) https://codepen.io/simgy/pen/PogqBQB