Jump to content
GreenSock

Rich Deane

Multiple Random SVG Animations - Best Practice

Recommended Posts

I have a page with a few (maybe up 6 or 7) random blobs and I want to animate them randomly, not tied to page scroll, just over time. I have created the SVG with multiple states so that I can use MorphSVG to change the blobs over time. 

 

Is there a better way of doing this? I just don't want to be inefficient in the approach that I choose... For context, the page that these will end up will have some split text animation and some simple ScrollTrigger reveal type animations also.

 

Thanks in advance,

 

See the Pen mdBKGvo by qtrichierich (@qtrichierich) on CodePen

Link to comment
Share on other sites

Sure, @Rich Deane, I don't see anything "wrong" with the way you were doing it. Here's a simpler version: 

 

See the Pen jOGKQmv?editors=0010 by GreenSock (@GreenSock) on CodePen

 

By the way, I think it's technically invalid (or at least frowned upon) to have multiple elements in the HTML with the same id. :) 

 

Thanks for being a Club GreenSock member! 🙌

  • Like 2
Link to comment
Share on other sites

Thanks heaps @GreenSock, a much more eloquent approach - and you're totally right about IDs, it would be invalid, all the examples I had seen with MorphSVG had used id's inside the svg so thats the route I took! haha!

 

I really appreciate your feedback & input!

  • Like 1
Link to comment
Share on other sites

A quick follow up @GreenSock, or any one else that would like to assist... :)

 

I further optimised html but having a single svg with all the available paths inside, rather than having that multiple times. The svgs I am having multiple times throughout the page have a single path that is morphed... 

 

Anyway, I adapted the code from above but for some reason, the svgs only go through one cycle, not endless as expected. Can anyone see why that would be the case?

 

See the Pen jOGKJXd by qtrichierich (@qtrichierich) on CodePen

 

Thanks in advance,

Link to comment
Share on other sites

Ignore that last post... I am being an idiot - i wondered why I couldn't get this code to work in my live site, and it's because I forgot the MorphSVG plugin js... AAAAAAHHHH....

 

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