Share Posted June 25, 2021 Hello guys, sorry I don't have a codepen for this but I have no idea how to even start with this. I need to do like a "tape tearing" animation but I don't know if it's possible with gsap Screen Recording 2021-06-25 at 17.11.30.mov 1 Link to comment Share on other sites More sharing options...
Share Posted June 26, 2021 Hi hmontelongo! GSAP can certainly be used to animate something like that, but you need to make it first. That looks 3D, so you could probably use three.js. Perhaps someone else has simpler solution, like with SVG. 1 Link to comment Share on other sites More sharing options...
Solution Solution Share Posted June 26, 2021 Hey @hmontelongo, Welcome to the GreenSock Forum. 8 hours ago, OSUblake said: Perhaps someone else has simpler solution, like with SVG. See the Pen wvdwKXb by mikeK (@mikeK) on CodePen Happy tweening ... Mikel 4 1 Link to comment Share on other sites More sharing options...
Share Posted June 26, 2021 Thanks @mikel! I knew there had to be a simpler solution. 1 Link to comment Share on other sites More sharing options...
Share Posted June 27, 2021 This is a really fun one @hmontelongo. We'd love to see the finished product 👀 Make sure to post it here once you've got it working! 1 Link to comment Share on other sites More sharing options...
Share Posted June 28, 2021 Really nice @mikel, you +next leveled+ this previous peel effect. 😉 4 Link to comment Share on other sites More sharing options...
Author Share Posted June 29, 2021 hey @mikel I want to thank you for the great example. Even tho I was able to implemented on my project It got more complex than I initially thought. This is a very raw example of what I have on my project. So basically I have images representing tape, so the the main one (horizontal one) is going to be on top of the other images, so by using your implementation I have a white shape covering the images underneath I understand the complexity of this and I run out of ideas of how to implemented, do you have another idea that I my try? See the Pen gOWONwG by huzzidiel (@huzzidiel) on CodePen 2 Link to comment Share on other sites More sharing options...
Share Posted June 29, 2021 Heya! It'll need some tweaks as Mikel had some inline transforms I was a bit puzzled by But this should set you off on the right foot. Masking 🥳 See the Pen cca48b5955fdd6a423f74110193a645f?editors=1011 by cassie-codes (@cassie-codes) on CodePen 2 1 Link to comment Share on other sites More sharing options...
Author Share Posted June 29, 2021 22 minutes ago, Cassie said: Heya! It'll need some tweaks as Mikel had some inline transforms I was a bit puzzled by But this should set you off on the right foot. Masking 🥳 Thank you for this implementation, I'll try to make it work and get back to you if I'm successful (or not!) 1 Link to comment Share on other sites More sharing options...
Share Posted June 30, 2021 Hey @Cassie, This is how you could do it - without inline transforms. See the Pen yLbybJo?editors=1000 by mikeK (@mikeK) on CodePen Happy masking ... Mikel 2 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