Search the Community
Showing results for tags 'sway'.
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/ http://codepen.io/jamiejefferson/pen/zjsCl http://jsfiddle.net/rhernando/qTSnC/3/ - missing the image Cheers!