Jump to content
Search Community

Gooey with Morphing

Ron Itelman test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hello, I would like to achieve something like the attached codepen with the following modifications, and using the TweenLite.min.js and the MorphSVGPlugin.min.js file.

 

When the circles comes our of the center parent circle, I would like to morph circles into something else using MorphSVGPlugin, like a square.

 

Any tips on how to create this effect?

 

See the Pen pvwZJp by lbebber (@lbebber) on CodePen

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums,

 

Since you are a Club GreenSock member you already have access to MorphSVG which is great.

 

I would suggest you start like this:

  1. Create an svg with one visible circle and the shape you want to morph into hidden (the video here shows how to set up illustrator file https://greensock.com/morphSVG)
  2. Create a CodePen demo that loads MorphSVG (you can just

    See the Pen OPqpRJ by GreenSock (@GreenSock) on CodePen

    ) and paste in your SVG code
  3. Create a timeline with a single tween that moves the circle to the right and morphs it into your custom shape
  4. Once one animation works, add additional icons and animations
  5. add another circle (that acts as the menu icon) and place it over your other circles and program it to play / reverse the timeline on each click
  6. add the goo / blur filter effects from the demo you referenced.

In other words, just start small. Once one circle morphs into another shape it should't be too hard to do the rest. 

 

If you get stuck along the way and need help with GSAP, just provide your demo and we'll take a look.

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