GSAP Lava lamp blobs

[robsarna]

Hi All.

 

I'm brand new to GSAP and my javascript skills are improving but I'm really stumped (and struggling to find resources) to create a 'lava lamp' style background animation similar to the one seen on this site - http://elje-group.com/en/home.html

 

I've found a couple of codepen lava lamps  (see below) but in the forks I've attempted, I've not managed to get the full screen working very well. Does anyone have any ideas where to start for something closer to the example above? 

 

Do I just create some SVG 'blobs' and tween between them? Is there a simple way to dynamically create the SVGs so that they're always random? (I've paid for club greensock, so I have access to all of the plugins etc)

 

Sorry if these are stupid questions, and any help would be greatly appreciated!

 

Thanks

 

See the Pen gMgOdK by CamillePx (@CamillePx) on CodePen

 

 

[PointC]

Hi @robsarna

 

Welcome to the forum and thanks for joining Club GreenSock.

 

First, there are no such things as stupid questions. We're all on different points of our learning journey.

 

The site in your post is using canvas for their blobs which would probably be the better choice for a full screen animation like that. That being said, there's no harm in trying it with SVG to see how it performs. The secret with goo and blobs with SVG is the filter. The important part from Chris's demo is this:

 

    <filter id="goo">
      <feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur" />
      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 21 -9" result="cm" />
    </filter>

 

You could create a full screen SVG with some circles and animate them randomly. When they collide the filter will take care of the rest for you. I made something similar with goo in this demo:

 

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

 

You said your full screen attempts have not worked well so I'm assuming you have something you could show us? If you would put that into a demo, we could take a look at it for you. Here's some info about that:

Hopefully that helps a bit. Welcome to the community and happy tweening.