AntonioNB4 Posted December 4, 2023 Share Posted December 4, 2023 Hi guys im trying to recreate this effects like in the video but is still hard to do. Any suggestion ? WhatsApp Video 2023-12-04 at 17.03.58.mp4 See the Pen VwgVJEp by Antonio-Nocella (@Antonio-Nocella) on CodePen Link to comment Share on other sites More sharing options...
Rodrigo Posted December 4, 2023 Share Posted December 4, 2023 Hi, There is a known issue with ClipPath inset in a few browsers. They report an incorrect set of values (one value of the inset is not returned so GSAP by default uses 0 in that one) which leads to unexpected results. This has nothing to do with GSAP, just a browser thing. Is more reliable to use polygon instead: See the Pen oNmJvRv by GreenSock (@GreenSock) on CodePen Hopefully this helps. Happy Tweening! Link to comment Share on other sites More sharing options...
AntonioNB4 Posted December 4, 2023 Author Share Posted December 4, 2023 16 minutes ago, Rodrigo said: Hi, There is a known issue with ClipPath inset in a few browsers. They report an incorrect set of values (one value of the inset is not returned so GSAP by default uses 0 in that one) which leads to unexpected results. This has nothing to do with GSAP, just a browser thing. Is more reliable to use polygon instead: Hopefully this helps. Happy Tweening! @Rodrigo OK now it's clear. Instead, if I wanted to move the mask from the bottom to the middle and then activate the clip-path polygon that expand himself? Link to comment Share on other sites More sharing options...
Rodrigo Posted December 4, 2023 Share Posted December 4, 2023 Hi, I'm not sure I follow 100% what you mean, maybe something like this: See the Pen ExrGxwY by GreenSock (@GreenSock) on CodePen If not, please be super specific about what you're trying to do. Hopefully this helps. Happy Tweening! Link to comment Share on other sites More sharing options...
AntonioNB4 Posted December 4, 2023 Author Share Posted December 4, 2023 9 minutes ago, Rodrigo said: Hi, I'm not sure I follow 100% what you mean, maybe something like this: If not, please be super specific about what you're trying to do. Hopefully this helps. Happy Tweening! @Rodrigo See the Pen jOdXOKQ by Antonio-Nocella (@Antonio-Nocella) on CodePen ok rodrigo forgive me. I will try to be precise. If you see the video I attached. When the clipath moves upward on the Y axis, the video inside it looks free from the movement of the container itself. As if it were in absolute position. I need something like that in the video. Link to comment Share on other sites More sharing options...
Solution Rodrigo Posted December 4, 2023 Solution Share Posted December 4, 2023 3 hours ago, AntonioNB4 said: If you see the video I attached. When the clipath moves upward on the Y axis, the video inside it looks free from the movement of the container itself. As if it were in absolute position. I need something like that in the video. Sorry still don't understand, isn't that exactly what the demo is doing? (I updated it in order to trigger things after the video is loaded): See the Pen ExrGxwY by GreenSock (@GreenSock) on CodePen The video element never moves is the clip path that is moving all the time, just like in the video in your first post on the thread. Happy Tweening! 1 Link to comment Share on other sites More sharing options...
AntonioNB4 Posted December 5, 2023 Author Share Posted December 5, 2023 17 hours ago, Rodrigo said: Sorry still don't understand, isn't that exactly what the demo is doing? (I updated it in order to trigger things after the video is loaded): The video element never moves is the clip path that is moving all the time, just like in the video in your first post on the thread. Happy Tweening! Yes ! Now i see it . Thank you for 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