Advice on ScrollMagic + TimelineMax + CollisionDetection?

[HaunGo 10 Likes (Newbie)]

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!

-HaunGO

 

 

 

 

 

 

[Ihatetomatoes 147 Likes (Specialist)]

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.

 

Cheers

Petr

[Carl 9,066 Likes (Superhero)]

Hi Petr,

 

Great to see you here. Thanks for jumping in.

 

HaunGo,

 

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.

[HaunGo 10 Likes (Newbie)]

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.   

 

 

Thanks, 

HaunGO

[HaunGo 10 Likes (Newbie)]

Ironically,   the website for this svg injection plugin has a nice looking collision detection animation on their home page!  

https://useiconic.com/

 

 

They use this:  http://famous-tutorial.meteor.com/

[Diaco 1,948 Likes (Superhero)]

Hi HaunGo 

 

for 2D collision detection pls check this : https://developer.mozilla.org/en-US/docs/Games/Techniques/2D_collision_detection