Jump to content
Search Community

Helix/Spiral animation

Climber test
Moderator Tag

Recommended Posts

Hey there!

 

I'm trying to reproduce the helix animation in the attached video which was created in AfterEffects. I'd like to create this as closely as possible using GSAP. Has anyone done anything like this, or do you have any general tips for the best approach to take on this? SVG with a motion path? TimelineMax?

 

Any help pointing me in the right direction would be greatly appreciated.

 

Thanks,

Ryan

Link to comment
Share on other sites

If you're looking for actual 3D, check out three.js

https://threejs.org/

 

If you just want to fake it with some DOM elements or a SVG, I don't think it would be too hard. You'd just need to create one section of the strand and then duplicate and offset. 

 

Others may have additional or ideas or similar links.

 

Happy tweening.

:)

 

 

  • Like 2
Link to comment
Share on other sites

29 minutes ago, Climber said:

do you have any general tips for the best approach to take on this? SVG with a motion path? TimelineMax?

If you don't need true 3D and aren't comfortable with something like Three.js then faking it with 2D is probably your best bet. Canvas, SVG, or DOM would all work in this case. You can do the left and right movement just using the x property with some sine easing. Use a separate tween for the scaling. Use staggers for the offset.

 

MotionPath wouldn't actually help you too much, though it is doable with motion paths. 

 

We recommend just using gsap.timeline() instead of TimelineMax/Lite. That's old stuff from v2 whereas gsap.timeline() is GSAP v3 :) 

  • Like 1
Link to comment
Share on other sites

Thanks for the replies, guys! I just tried playing with tweening a single diamond shape around manually using scale with x/y changes. It's hard to make this look like it's following a circular path in a realistic fashion. The easing just doesn't feel right. I think using a 3D library like three.js is probably where I'll have to look to get this perfect. Thanks for the feedback.

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.
×
×
  • Create New...