Guest Posted August 23, 2021 Share Posted August 23, 2021 Hello folk , any one know how we can make like this in gsap https://tympanus.net/codrops/2017/06/28/organic-shape-animations-with-svg-clippath/? Link to comment Share on other sites More sharing options...
nico fonseca Posted August 23, 2021 Share Posted August 23, 2021 Hey @Lolia Trafam yes of course! Some examples : 3 Link to comment Share on other sites More sharing options...
Solution Cassie Posted August 23, 2021 Solution Share Posted August 23, 2021 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! 3 Link to comment Share on other sites More sharing options...
Guest Posted August 28, 2021 Share Posted August 28, 2021 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 More sharing options...
nico fonseca Posted August 28, 2021 Share Posted August 28, 2021 @Lolia Trafam Can you provide a minimal demo? So we can help you with your issue. 🙂 2 Link to comment Share on other sites More sharing options...
Guest Posted August 28, 2021 Share Posted August 28, 2021 1 minute ago, nicofonseca said: Can you provide a minimal demo Sorry for my bad explain to my issue but i follow this code https://tympanus.net/codrops/2017/06/28/organic-shape-animations-with-svg-clippath/ Link to comment Share on other sites More sharing options...
nico fonseca Posted August 28, 2021 Share Posted August 28, 2021 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. 2 Link to comment Share on other sites More sharing options...
Guest Posted August 28, 2021 Share Posted August 28, 2021 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 More sharing options...
Cassie Posted August 28, 2021 Share Posted August 28, 2021 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! 2 Link to comment Share on other sites More sharing options...
Guest Posted August 28, 2021 Share Posted August 28, 2021 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 More sharing options...
Cassie Posted August 28, 2021 Share Posted August 28, 2021 It's a bonus plugin for club GreenSock members https://greensock.com/club/ 1 Link to comment Share on other sites More sharing options...
Guest Posted August 28, 2021 Share Posted August 28, 2021 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 More sharing options...
Cassie Posted August 28, 2021 Share Posted August 28, 2021 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.) 2 Link to comment Share on other sites More sharing options...
mikel Posted August 28, 2021 Share Posted August 28, 2021 Hey @Lolia Trafam, You could try this ... See the Pen 5e4e06346f3c6a27ff91a5380a627d73 by mikeK (@mikeK) on CodePen Blobs are generated by blobmaker Happy morphing ... Mikel 5 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