Jump to content
Search Community

Melting Background Animation

gab
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

Posted

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 

Posted

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
Posted

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!

Posted

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
Posted

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

Posted

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
Posted

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!

Posted

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
Posted

@OSUblake show-off.  <_<  :D

 

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

 

 

 

 

 

  • Like 2
  • Haha 3
Posted

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

  • Like 1
  • Haha 2
Posted

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

  • Like 1
  • Haha 1
Posted

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

  • Like 1
  • Haha 2
Posted

Seems like an appropriate time to repost this evidence.

 

r0RjYUz.jpg 

  • Like 1
  • Haha 5
Posted

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

  • Like 2

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