minhcd Posted June 2, 2021 Share Posted June 2, 2021 Hi all, I visit https://marxdesign.co.nz/ and they have a cool animation for their company name 'Marx'. It stretching and waving on mousemove event. I inspect the logo and see they're using canvas. Can i do it with gsap ? I'm still finding the way to do it and I 'd love to hear guides, ideas from you guy. Thanks all ! Link to comment Share on other sites More sharing options...
Cassie Posted June 2, 2021 Share Posted June 2, 2021 So, GSAP is largely a way to animate properties. What you need to figure out is which properties you need to animate and on what. e.g. is it SVG, canvas, shaders, DOM elements etc, and what are they animating? Short of looking into the source code it's hard to tell. It looks like they may be drawing an image to a canvas element and then stretching or displacing the image. I would probably look into using curtains.js? https://www.curtainsjs.com/get-started.html (Unless you want to do a deep dive into shaders and displacement maps! ) 1 Link to comment Share on other sites More sharing options...
elegantseagulls Posted June 2, 2021 Share Posted June 2, 2021 Hi @minhcd, GSAP can definitely animate canvas. And it looks like that Marx site is using GSAP is some way shape or form. Here's a super simple example on animating canvas with gsap: See the Pen gObyOwQ?editors=0010 by elegantseagulls (@elegantseagulls) on CodePen If your diving into the WebGL world, the concept is basically the same: either create an object, or use known property values/variables that gsap can access. PixiJS plugin example: See the Pen qBEwjPV?editors=0010 by elegantseagulls (@elegantseagulls) on CodePen Custom GSAP animated shader with ThreeJS shapes: See the Pen zYBeqmq?editors=0010 by elegantseagulls (@elegantseagulls) on CodePen There's some good tutorials on how to do some of these sorts of effects (usually on images, but can easily be applied to a logo) if you do some searching. Warning though: WebGL definitely has a learning curve, so if you're new to development, it will be a very steep slope. 6 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