Jump to content


Looking to learn more about Physics

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

Hey everyone,


I was interested in learning more about how to create a physics animation effect, similar to those that I've seen in demos or in live sites (like kairoswatches.com). 


Specifically, I'm interested in learning more about what goes into the creation of say....a field of star-esque lights that just link and float about behind other things (for instance). 


I'm not trying to have someone make something for me, but while I am an experienced front-end developer, I find the physics stuff slightly intimidating.


In summary, if anyone can recommend some resources/methodologies that would best help me with what I'm trying to achieve I'd appreciate it. 

If I need to add/provide any other info, just let me know. Thanks!

Link to comment
Share on other sites

Hi @ads


Great question! GSAP has a lot of plugins with physics based properties, but understanding how to use them can be a little confusing if you're not familiar with the concepts behind them.


I would start out by learning how to create animations without using tweens. So use something like TweenLite.ticker or requestAnimationFrame to update each object individually on every tick. This will give you a better understanding of how certain values are going to be affected by different forces.


To get started, check out... 


Ralph Thomas

Definitely a person you should follow on GitHub


UI demos



Repo for demos



I really love his Gmail demo. I've been wanting to make a GSAP version of that for the longest time, but haven't gotten around to it.



Some of Ralph's experiments



Repo for experiments



Verlet Physics

There's a ton of different libraries and resources to choose from, but most are based on Box2D. I really can't recommend one, so I'll just let these demos speak for themselves.


Probably the most liked pen on CodePen. Need I say more about the awesomeness of verlet physics?

See the Pen KrAwx by dissimulate (@dissimulate) on CodePen


I hate spiders. Try to throw the spider of the web and watch him suffer!



Bouncy shapes. Drag and throw the shapes around



Gerard Ferrandez is another person to follow. Here's a demo using a verlet engine he created.

See the Pen wazbjv by ge1doot (@ge1doot) on CodePen


Another verlet demo by Gerard

See the Pen PqWZvR by ge1doot (@ge1doot) on CodePen



Phaser is in league of it's on. It's a game engine built on Pixi.js, and works great with GSAP. It also has one of the most supportive communities around. There's an endless supply of tutorials created by the community, and being a game engine, there's a ton of physics involved.



Phaser's Box2D plugin with a bunch of different demos.





HTML5 Animation with JavaScript. This is a MUST HAVE book! I don't think I can stress that enough. When I look at stuff on CodePen, it's really amazing to see how many different people and their work have been inspired by this book. 



Here's the accompanying website and repo for that book. This book has several examples that sound similar to the effect you mentioned, so you might want to check out the demos on that site first.




The Nature of Code: Simulating Natural Systems with Processing. This is another game changing book, but it's a little more advanced, and is focused on algorithms that can be used to simulate natural systems, i.e. the world around us. Note that it written for Processing and uses Java. I honestly don't know how to use either, but the book is written in such a way that makes it pretty easy to convert what is being shown over to JavaScript. There is also a JavaScript library based on Processing called p5.js which might help out, but again, that's something I know nothing about.



EDIT: You can view this book online here.



Hope that helps!

  • Like 10
Link to comment
Share on other sites

Just to save you some time looking through everything, I think Chapter 12 in the HTML5 Animation with JavaScript book has some of the stuff you are looking for.



That chapter is towards the end of the book, so it might not be something that you can just jump into without going through earlier chapters.

  • Like 2
Link to comment
Share on other sites

Great links Blake. :)


I'm really interested in learning more in this area so I'm gonna get started with your book recommendation.

  • Like 1
Link to comment
Share on other sites

Hey Pedro


I just got my copy yesterday and went through the first few chapters last night. It's nice having the Trigonometry chapters in there for a refresher as it's been some time since I've used a lot of it. I flipped through the later chapters as well and it all looks like a lot of fun. Tons of awesome information.


I'm glad Blake recommended it, but now I know his secret. He may not actually be an AI from the Matrix, but just a human that's really good at math.  :-D  

  • Like 1
Link to comment
Share on other sites

Hey all,


OP here. Sorry i've been so busy with some job-changing stuff to reply sooner! 

Thanks a ton everyone, this is exactly the type of thing I was looking for. I really appreciate your detailed replies and I plan to visit each of these resources in detail. Thank you again!

  • Like 1
Link to comment
Share on other sites

I'm glad Blake recommended it, but now I know his secret. He may not actually be an AI from the Matrix, but just a human that's really good at math.  :-D  


Haha! I brought up this book to Diaco some time ago, and it turns out it he knew about it too! But you don't have to be good at math, you just need to understand the different relationships of a triangle.


My favorite part of the book was working on the inverse kinematics. I modified this demo into an octo-monster that was throwing people and cars around. So much fun watching them be thrown around like a bunch of rag dolls.


  • Like 1
Link to comment
Share on other sites

Thanks again for the recommendation Blake. :)


The IK information is also the most interesting to me. I do a lot of puppet work in After Effects and a fair amount of IK/FK work in Cinema 4D so learning to make those types of animations for the browser is quite intriguing to me.

  • Like 1
Link to comment
Share on other sites

This will take me back to my days of 3D... I have been waiting for WebGL, GPU in the browser and things like ThreeJS for years now.


Most definitely will be looking into that. Specially the IK systems. 


(Just need to stop saying yes to every single banner campaign that gets thrown my way...)

  • Like 1
Link to comment
Share on other sites

Unfortunately, there's no WebGL or matrix math in the book. However, it does a good job covering the fundamentals of 3d animation. I was able to use a lot of the 3d techniques from the book to make an SVG in 3D. It's slow, and I wouldn't recommend doing something like that for production, but it works!


See the Pen eNKYbG?editors=0010 by osublake (@osublake) on CodePen

Link to comment
Share on other sites

Shoulda have bought the book and read it all over the last weekend... Now I need to discover how viable is to make a exploding ball of pink dust and/or coloured liquid mixing.


Clients, eh? Will ask you the world.

  • Like 1
Link to comment
Share on other sites

The hard bit is going to be fitting it all in the allocated file size... I'm still waiting some confirmation but it can be anywhere between 10kb and 200bk. Possibly no libraries allowed...





Thanks for the examples Blake - I will sink my teeth into them later on.

Link to comment
Share on other sites

I don't get the point of a library restriction. We want quality work from you, but no outside help!


But you'd be surprised how much stuff you can do with 10kb. Just look at some of the stuff you can do with only 50 LOC...


Link to comment
Share on other sites

  • 1 month later...

Sarah Drasner is working on a repo where she is rewriting stuff from The Nature of Code and some of Rachel Smith's hack physics demos over to plain JavaScript and SVG. You might want to follow along. She knows her stuff!



I also found out that you can actually view The Nature of Code online for free! It even has some examples you can play around with.




You don't have to use the canvas with that HTML Animation book if you don't want to. You can do the exact thing Sarah is doing, and use SVG instead. The only part of the book you can't use SVG for is the image/pixel manipulation. The 3D animation part is possible with SVG, but it's a little trickier because you need to re-append your elements to change their z-index.

  • Like 3
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.