Animating Colour DNA Strand in Edge Animate and Greensock

DNA Strand in Adobe Edge Animate and GreensockJust a quick test to build on my Gradient Spiral Generator demo. I have hard-coded the colours in this demo as I was more interested in getting the motion, timing and spacing right. I’m currently working on adding a timeline to it to make it scrubbable – it sort of works but it’s not reliable enough to post yet!

This helix is actually based on some Flash code I wrote years ago for BMW and their ‘Reasons’ campaign. It’s not online now but it was a pretty cool interactive DNA strand and converting from Flash ActionScript 1 to JavaScript is not as difficult as some (Flash) people are saying.

Click here to launch the Colour DNA demo.

Download the source files here.

2 thoughts on “Animating Colour DNA Strand in Edge Animate and Greensock

    1. Yup each strand is a ‘Strand’ symbol that contains a line (DIV) and two squares circle DIVs (top and bottom).

      The entire thing is animated via code – making edits to timeline animations is just too laborious. Now that the GSAP JS library is publicly available I’ll post the source.

      Thanks for stopping by!

      UPDATE: Ooops I thought you were referring to the Manta Ray Grid animation. Still, this DNA animation is also entirely animated using GSAP – the Manta Ray Grid animation is just an evolution of this one with more complexity.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s