Jump to content
Search Community

Canvas image animation

minhcd test
Moderator Tag

Recommended Posts

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

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! )
 

  • Thanks 1
Link to comment
Share on other sites

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.

  • Like 6
  • Thanks 1
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...