simgy Posted March 5 Share Posted March 5 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 Link to comment Share on other sites More sharing options...
mvaneijgen Posted March 5 Share Posted March 5 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 1 Link to comment Share on other sites More sharing options...
simgy Posted March 5 Author Share Posted March 5 @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. Link to comment Share on other sites More sharing options...
Solution mvaneijgen Posted March 5 Solution Share Posted March 5 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. 1 Link to comment Share on other sites More sharing options...
simgy Posted March 5 Author Share Posted March 5 You are right. It seems to be the rem value. It works smooth with px. Thanks a lot for the great help and explanations. Link to comment Share on other sites More sharing options...
GreenSock Posted March 13 Share Posted March 13 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. 2 Link to comment Share on other sites More sharing options...
simgy Posted March 19 Author Share Posted March 19 Thanks for the quick fix and help Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now