Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
hmontelongo

How to create a tearing tape animation

Go to solution Solved by mikel,

Recommended Posts

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.

 

  • Like 1
Link to comment
Share on other sites

  • Solution

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

 

 

  • Like 4
  • Thanks 1
Link to comment
Share on other sites

Thanks @mikel! I knew there had to be a simpler solution.

 

 

 

  • Like 1
Link to comment
Share on other sites

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!

  • Like 1
Link to comment
Share on other sites

 

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

  • Like 2
Link to comment
Share on other sites

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!)

  • Like 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×