Cassie Posted November 19, 2019 Share Posted November 19, 2019 Hey folks. ? Having a bit of trouble with how to approach this. A client's asked for some x-mas baubles to "drop in all dangly" from the top of the screen, I've made a rough SVG of the structure of the bauble. The 'string' is made of circles (and other shapes, like little ribbons and bells and stuff) instead of a path. I was looking at the physics plugin, (in the attached codepen) But it kinda needs a bit of a bounce ease? And you can't mix physics and eases... Has anyone done anything like this? Any ideas of a good approach? See the Pen 91486890e1fe6b91fd9b71c9d88a95eb?editors=1010 by cassie-codes (@cassie-codes) on CodePen Link to comment Share on other sites More sharing options...
mikel Posted November 19, 2019 Share Posted November 19, 2019 Hey @Cassie For such cases @OSUblake comes into play ... See the Pen PzbqWW by osublake (@osublake) on CodePen Happy swinging ... Mikel 3 Link to comment Share on other sites More sharing options...
Cassie Posted November 19, 2019 Author Share Posted November 19, 2019 Yeah, that's really cool. Not quite what I need though. I don't need to join them up with a path, and there's 20 baubles with 30 or so shapes on each 'string'... so I don't really want to have to hand code the x and y values for each shape. I'll carry on experimenting! (also blake is mad clever) Link to comment Share on other sites More sharing options...
OSUblake Posted November 19, 2019 Share Posted November 19, 2019 If have a path, you can figure out where stuff would be located on that path for every animation frame. Google how to calculate points on a quadratic Bezier. That's what the path in the demo Mikel posted is using. Sorry, I'm on mobile, or I would make a demo. 3 Link to comment Share on other sites More sharing options...
ZachSaucier Posted November 19, 2019 Share Posted November 19, 2019 2 hours ago, Cassie said: A client's asked for some x-mas baubles TIL what a "bauble" is. We (very intelligently) call them "Christmas balls", hah. It sounds to me like you want a chain. That'd probably be easiest to use a physics engine for; something like this: https://brm.io/matter-js/demo/#chains 1 Link to comment Share on other sites More sharing options...
OSUblake Posted November 19, 2019 Share Posted November 19, 2019 Ok, here's a simple demo. If you can get a good looking path animation, then placing baubles shouldn't be too hard. You can use cubic beziers if needed, it just uses a different calculation. See the Pen 7b238a209825cd951d768f41715b8fd7 by osublake (@osublake) on CodePen 7 Link to comment Share on other sites More sharing options...
OSUblake Posted November 19, 2019 Share Posted November 19, 2019 12 minutes ago, OSUblake said: You can use cubic beziers if needed, it just uses a different calculation. And if you cubic beziers, you can use MotionPathPlugin to do the calculations. 1 Link to comment Share on other sites More sharing options...
OSUblake Posted November 19, 2019 Share Posted November 19, 2019 31 minutes ago, ZachSaucier said: It sounds to me like you want a chain. That'd probably be easiest to use a physics engine for; something like this: https://brm.io/matter-js/demo/#chains This is little bit simpler than a full-blown physics engine. https://subprotocol.com//system/verlet-hello-world.html https://github.com/subprotocol/verlet-js 4 Link to comment Share on other sites More sharing options...
GreenSock Posted November 19, 2019 Share Posted November 19, 2019 I'm not sure how fancy you want to be with all the wobbling and the string part, but sometimes you can use simple tweens with an elastic ease to get a decent effect: See the Pen 423ab27d771e09f17fec162766848a1c by GreenSock (@GreenSock) on CodePen You could also do that just for the main Bauble and then use an onUpdate to handle bending the string accordingly to whatever the new position is. Just a thought. 5 Link to comment Share on other sites More sharing options...
Cassie Posted November 22, 2019 Author Share Posted November 22, 2019 Thanks for all the help folks! Link to comment Share on other sites More sharing options...
Cassie Posted November 22, 2019 Author Share Posted November 22, 2019 On 11/19/2019 at 3:49 PM, OSUblake said: This is little bit simpler than a full-blown physics engine. https://subprotocol.com//system/verlet-hello-world.html https://github.com/subprotocol/verlet-js This is super cool. Look at these trees! ? https://subprotocol.com//system/tree.html 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now