Jump to content
GreenSock

gab

Melting Background Animation

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

 

This is my first post here! My name is Gab and i'm new to the gsap community!

 

I need some help in reproducing an animation i found on codrops.

 

The animation i'm talking about is this one -> https://tympanus.net/Development/ShapeOverlays/index6.html

 

I can't get my head around how to implement this using TweenMax.

 

I've tried to use morphsvg but it didn't work, i've tried tweening the 'd' attribute of the path but it didn't work either.

 

Anyone has some ideas?

 

Thanks in advance

 

 

EDIT:

 

this is the codepen 

 

See the Pen zRwORL by gab87 (@gab87) on CodePen

i've tryied to implement this code from my local dev env but i think i didn't succeded 

Link to comment
Share on other sites

Hi @gab :)

 

Welcome to the forum.

 

That demo looks pretty good to me. I'd recommend following along with that article and implementing it the way they did. It will give you a lot of control. That being said, you can make it work with MorphSVG too. I put together a quick pen for you to see how it could work.

 

I just drew out a quick blobby path that I wanted for the mid-point of the animation & then duplicated that path twice - once for the start and once for the end. By duplicating the master, the clones will have the same number of points and that makes it easy for MorphSVG to perform the calculations. For the start and end paths, I just squished down the points and placed them slightly outside the viewBox. I manually duplicated a few copies of the start path so we could stagger some colors, but you could create a loop and clone those if you wanted. Here's the result.

 

See the Pen BYRavx by PointC (@PointC) on CodePen

 

It's not exactly the same as the referenced demo, but it works. Hopefully that helps. Happy tweening.

:)

 

  • Like 5
Link to comment
Share on other sites

Hay man thanks for the tips, it seems that i got the svg wrong.

 

What i liked about the codrops example is that the melting animation has the points calculated randomly so the animation is always different.

 

But i think that your example is a good start!

 

Thanks again for your help!

Link to comment
Share on other sites

I agree. Creating things dynamically certainly gives you more options and would probably be a better way to go. I just wanted to show that it was possible with MorphSVG as you mentioned it in your original question.

 

I'm not sure you necessarily did anything wrong with your SVG. You probably just didn't quite see the morph behave the way you wanted it to. MorphSVG is an amazing plugin and not needing the same number of points is pretty incredible. That being said, there's no reason not to try and help it as much as possible. In my demo I have the same number of points on each path all cloned from the same master. If you can carefully plan your morphs while creating your artwork, you'll almost never seen undesirable behavior from the plugin.

 

Happy tweening.

:)

 

  • Like 4
Link to comment
Share on other sites

Well i think i have to study illustrator more, my svg aren't always on point :)

Link to comment
Share on other sites

Cool article! I love seeing SVGs that are made with code.

 

Doing that animation with GSAP isn't too hard. I made a post about creating waves that does the same thing, but for a polyline/polygon.

 

 

 

I don't have time right now, but I can show how to convert those demos to use that technique later.

 

 

  • Like 2
Link to comment
Share on other sites

hey thanks for the reply! i'll read your article when i have a lunch break!

 

it'll be cool to know how to make dyniamic svg with the gsap suite!

Link to comment
Share on other sites

Morphing a path is good for a lot of things, but it animates every point at the same time. In the codrops demo, the points are animated separately, giving some nice variation to the paths.

 

Quick and dirty version. It's tweening an array of values from 100 to 0. Click to create a new animation.

 

See the Pen BYwgBg by osublake (@osublake) on CodePen

 

 

  • Like 5
Link to comment
Share on other sites

@OSUblake show-off.  <_<  :D

 

Nicely done. I may have to steal some of that demo. 

 

 

 

 

 

  • Like 2
  • Haha 3
Link to comment
Share on other sites

I stole a good portion of it from the codrops demo. :o

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

Just like the Picasso quote: "Good artists copy; great artists steal."

  • Like 1
  • Haha 1
Link to comment
Share on other sites

"A remix is everything"

Link to comment
Share on other sites

This is getting deep!

Link to comment
Share on other sites

Always take the red pill. I should know seeing as how I'm from the matrix.

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

Seems like an appropriate time to repost this evidence.

 

r0RjYUz.jpg 

  • Like 1
  • Haha 5
Link to comment
Share on other sites

man! i think i'm going to love this place :D

  • 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.
×