Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Lolia Trafam

Blob animation or organic shape animation with gsap

Go to solution Solved by Cassie,

Recommended Posts

  • Solution

You can also download the source from the page you linked to - anime syntax is very similar to GSAP, so it wouldn't be too difficult to swop out.

All the hard work here is in the SVG prep!

 

  • Like 4
Link to comment
Share on other sites

On 8/23/2021 at 2:17 PM, Cassie said:

All the hard work here is in the SVG prep!

 

Hey , can you help me if i want to make all blob like second one , i get it the same id but when i hover on one all the rest one move  , i want to make each one animate alone ,  so i try to replace id with class , is a bit work , each one animate alone , but the blob become square 

Link to comment
Share on other sites

Yes, that's your goal, but we need your minimal demo to see where your issue is in order to help you.
You can use Codepen or Codesandbox. 

  • Like 2
Link to comment
Share on other sites

1 hour ago, nicofonseca said:

Yes, that's your goal, but we need your minimal demo to see where your issue is in order to help you.
You can use Codepen or Codesandbox. 

Thank you so much for your time , i made one but sorry for nested cod , i need to switch from animjs to gsap too , the problem explained in demo

See the Pen VwWvmmY by LoliaTrafam (@LoliaTrafam) on CodePen

 

Link to comment
Share on other sites

Hey Lolia - this is not a minimal demo and it's not using GSAP. It looks to be copied directly from the codrops article.

This forum is staffed mainly by volunteers - they're giving up time to help and in return we ask that people in need of help meet us half way.

The only thing you need to morph a shape using GSAP is this one line & the morph SVG plugin -

gsap.to('.target-shape', {morphSVG:".end-shape"})


If you need to target multiple elements individually you'll need to use a loop.


My advice would be to delete all of the code copied from the codrops article and start with just two svg paths and that one line of GSAP code.

Work up from there.

Best of luck!
 

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

33 minutes ago, Cassie said:

Hey Lolia - this is not a minimal demo and it's not using GSAP. It looks to be copied directly from the codrops article.

Yes right , my bad cuz the time is short sorry , then thank's for advice 

 

34 minutes ago, Cassie said:

The only thing you need to morph a shape using GSAP is this one line & the morph SVG plugin -

 

is it free ??

Link to comment
Share on other sites

1 minute ago, Cassie said:

r club GreenSock members

Yes that is the point , unfortunately , i am not a member of club , thanks 

Link to comment
Share on other sites

You can directly target the d attribute but it won't be easy and you'll need to prep you SVG paths so that they have the same number of points.

As you say you're on a tight timeframe - it would definitely be worth it to join club GreenSock for the morph SVG plugin.

(You can use it as much as you like on codepen for free too.)
 

 

  • Like 2
  • Thanks 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.
×