foxacid Posted May 11, 2021 Share Posted May 11, 2021 Hi all, first post here, so please bear with me. I've adapted the Advanced Staggers demo from the docs to create a "Streamline" effect. Everything works as expected but what I want to do is modify this bit so that the initial line rotation is gradually increased by column instead of flow layout: rotation: i => i * 0.5, Any help on this is much appreciated. Cheers! See the Pen PoWMgOx by foxacid (@foxacid) on CodePen Link to comment Share on other sites More sharing options...
Solution GreenSock Posted May 11, 2021 Solution Share Posted May 11, 2021 Welcome to the forums, @foxacid! Is this what you mean? See the Pen qBrOedJ?editors=0010 by GreenSock (@GreenSock) on CodePen You can use the gsap.utils.distribute() method to do some pretty cool stuff. 👍 3 1 Link to comment Share on other sites More sharing options...
foxacid Posted May 12, 2021 Author Share Posted May 12, 2021 Amazing, that's it! I knew you guys had something up your sleeves for this task 😉 I see that an easing curve can be applied to the distribute function but I'm wondering if it be possible to reverse direction of the animated property (i.e. a sinusoidal motion with a zero crossing)? Thank you! Link to comment Share on other sites More sharing options...
foxacid Posted May 12, 2021 Author Share Posted May 12, 2021 OK sorry, that can be achieved using the from parameter. Awesome stuff, I'll mark this as solved. Cheers! Link to comment Share on other sites More sharing options...
OSUblake Posted May 12, 2021 Share Posted May 12, 2021 21 minutes ago, foxacid said: possible to reverse direction of the animated property (i.e. a sinusoidal motion with a zero crossing)? Not sure what you mean, can explain that in more detail? Link to comment Share on other sites More sharing options...
foxacid Posted May 12, 2021 Author Share Posted May 12, 2021 13 minutes ago, OSUblake said: Not sure what you mean, can explain that in more detail? What I meant was that the rotation is zero in the center and goes clockwise towards one edge and anticlockwise to the other. Actually from: center doesn't quite cut it since the direction is not reversed. See here: See the Pen NWpxyQE by foxacid (@foxacid) on CodePen Link to comment Share on other sites More sharing options...
OSUblake Posted May 12, 2021 Share Posted May 12, 2021 You can use base. That's the value to start from. amount gets added to that, so this will go from -20 to 20... rotation: gsap.utils.distribute({ base: -20 amount: 40, axis: "x", grid: grid, }), 2 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