Jump to content


Advice on ScrollMagic + TimelineMax + CollisionDetection?

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 Every One,    I would like some advice from this community of experienced interactive animators!


I've been tasked with a "simple" scroll-based animation.  With the first part of it featuring simple collision detection of circular objects.    I'm wondering if I should FAKE the physics with static animation, OR use some kind of simple 2D physics with collision detection.


I'll be using ScrollMagic to control a TimelineMax sequence, animating with SVG elements.


Here is a brief overview of the animation:

  • About 10 circles of various sizes float in 2D space, bouncing off each other, and showing a stressed effect on impact.  (This could either be sortof random, or hard coded.. this is what I'm asking advice on. )
  • After a few collisions, the scroll based animation continues..
  • Next, a few circles highlight and overlap instead of colliding..
  • THEN, the overlapping section highlights.. A ven diagram..  
  • Then, that ven diagram (oval) shape is animated in some way..    


I have TWO primary questions:

  1. Should I use .svg elements with the image tag:  <img id="circle1" src="image.svg">  or   as that big string of svg code?
  2. Should I FAKE the collision detection?  or implement some sort of simple 2d physics engine w/collision detection that I don't know about?   (is there a GSAP class for this?) 
  3. ALSO, any general advise about how to execute this would be helpful.

Thanks in advance!








Link to comment
Share on other sites

Hey HaunGo,

I think that something like GSAP Physics2DPlugin could be used for the collision detection part.


Here's the

See the Pen nkylt by GreenSock (@GreenSock) on CodePen



1. Use inline <svg> (string of code) if you want to animate the SVG itself or part of it.

2. As per above, I would use the plugin. Faking collision, gravity etc would be a lot of work and would most likely not look very realistic.

3. I have a few ScrollMagic tutorials on my blog, that might be helpful for the triggering part of your project.




  • Like 2
Link to comment
Share on other sites

Hi Petr,


Great to see you here. Thanks for jumping in.




I would strongly recommend Petr's tutorials. Best out there by far.


I understand your concerns about the inline <svg> elements, they can really clutter up your HTML code.

You might want to look into using an <svg> injector like: https://useiconic.com/tools/iconic-js/

I haven't used it myself but it looks like a great solution.


As much as I'd love to see you using our physics plugins, I just want to clarify that they do not handle collision detection. Their sole purpose is to create tweens based on physics properties like velocity, acceleration, friction and gravity. A key benefit of these plugins is that all the animations can be fully controlled (pause, play, resume, reverse), nested in timelines, and ultimately scroll-driven with tools like ScrollMagic.

  • Like 1
Link to comment
Share on other sites

Petr & Carl, 


Thanks for replies!  I'm a big fan and long-time watcher of BOTH of your tutorials, and I will definitely be referencing the tomato-hating tuts during development. 


I didn't think the GSAP Physics2DPlugin had collision detection.. I've used the AS3 version.      


That SVG injection look awesome.. I think I'll try that.


This post might be useful:    http://greensock.com/forums/topic/9013-pixel-perfect-collision-detection/     

But it uses a <canvas> object, and I don't know if I can mix and match DOM and CANVAS elements..  (I don't know much about <canvas>)



At this point.. I'm missing the Flash dev environment.. .. I could build this on the visual timeline in NO-TIME..   I wonder if I could use Adobe Edge for this? but i think it also exports into <canvas>?    and it probably doesn't use GSAP anyway.    



I'm leaning toward faking the whole thing.. I've got a pretty good eye for animation and movement, but could definitely be tedious.    I'll be starting the project next week, so I've still got some time  for suggestions. :)   





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.