Jump to content
Search Community

Swinging / Swaying objects hanging off hook effect with physics?

Rockethouse test
Moderator Tag

Recommended Posts

Hey guys,

 

Im building a product listing page that looks like the product is hanging off a hook on a rail, and its using a carousel plugin to scroll left to right (as if the items were sliding along the rack).

 

What i'm trying to achieve with Tweenmax is a real life type swinging effect.

 

So each item would be very slowly swaying from wind movements, and then if you hover over it the item would swing or sway more. As well as this when you drag the carousel or click next / prev buttons, the items would slide across and "drag" as they would in real life, being anchored at the top of the hook.

 

I've done a simple prototype with css3 but it's just not cutting it! It needs to be better!

 

I'm very new to TweenMax so i'm not even sure if its possible, but if anyone can help or let me know if what I want to achieve is possible that would be awesome!

 

The other thing is that I want it to be kind of dynamic... so each item sways at its own speed or direction so they don't all look the same... 

 

Prototype CSS3 example: http://kulas-hagenes-and-kutch8587.myshopify.com/

 

I've done some searching and found a few examples that are close to what I'm after:

 

http://pieterbraam.nl/swing/

See the Pen zjsCl by jamiejefferson (@jamiejefferson) on CodePen

http://jsfiddle.net/rhernando/qTSnC/3/ - missing the image

 

 

Cheers!

Link to comment
Share on other sites

Oh, man, I could have some fun with this. That dragging is perfect for Draggable with ThrowPropsPlugin too (see http://www.greensock.com/draggable/). This could look really cool when it's all hooked up. So yes, it's definitely possible, but to be truly realistic, you'd need to do some interesting stuff with proxy objects and basic physics equations. This goes well beyond what we typically provide for free here in the forums, though. It's more of a consulting project. Shoot me PM if you'd like to explore that. 

 

If you want to simulate something with basic tweens, check out the Elastic.easeOut ease, but that will only get you so far. Like I said, you really need some custom stuff here and it'd be a lot of fun to wire up - I just don't have time to explore it all and then explain it to you right now. Maybe someone else wants to take a shot. 

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...