How to: dragon animation

[hobiew]

Hello, 

 

I have no codepen nor do i require any code in return at this moment. It is more of a how to question. I want to pick the brains of this forum

 

I want to animate this dragon in a 2D space see file in attachment. 

 

For the arms I could use simple rotates once I isolate them and put the anchor point on the body. 

For the flames I could create a sprite like animation and loop through it. 

However about the body I'm not sure... I would probably want it to be a wave like animation like this example (codepen): . My first idea was to use morphSVG just for the body and try to animate it that way. But there might be a better solution. Any tips on how to achieve this? Everything is welcome! Thanks in advance!!!

See the Pen KKpzMJd by chrisgannon (@chrisgannon) on CodePen.

[Cassie]

Pixi's texture mesh would be ideal!

https://pixijs.com/8.x/examples/mesh-and-shaders/textured-mesh-basic

[hobiew]

Hey Cassie! Thanks for the quick reply. Interesting I will dive into it, however on first glance this seems to 3D like and distorted. I want to animate it like it's a drawing if that makes sense. Like a stopmotion but without the low FPS haha. 

Do you think MorphSVG could be useful here or would it be too complex on this animation? I could use the puppet tool in illustrator to create the inbetween frames perhaps.

 

Also rather keep it in GSAP as I would be using GSAP to do other animations on this website as well.

[Rodrigo]

Hi,

 

Actually for creating an articulation's animation IDK if MorphSVG would be the best approach, it will definitely work, but think about moving your arm or leg, there is nothing actually morphing, your body stays the same, right? Is just a combination of motions as @Diacoshows in this demo:

See the Pen RaXRdE by MAW (@MAW) on CodePen.

 

As Cassie mentions I'd try to use PIXI for this. Just an FYI PIXI is a 2D WebGL rendering engine, think of it as the 2D cousin of THREEJS, so is not 3D. Also as every WebGL rendering is extremely performant and super powerful indeed.

 

Happy Tweening!

[hobiew]

Hi Rodrigo! 

 

My thought was isolating the arms and group them. Than I would be animating the arms with simple rotations. 

 

Group the body and apply a morphSVG to another group of the body, if thats possible... I would really rather stick with GSAP for these animations. As they would fit into this design for example:

 

 

Animating every point manually in your example looks sick, but also gets me dizzy lol. So I'll keep that as a option B. 

 

Anyway I will cook up a code pen tomorrow/friday and post my findings.

 

One more question though: it says I can use the morphSVG in  local enviroment to test it out. I'm unsure on how do this to be honest. Any link to a guide on how to install this locally? Thanks!

[mvaneijgen]

14 minutes ago, hobiew said:

Group the body and apply a morphSVG to another group of the body, if thats possible...

No, this is not possible. Morph SVG can only morph between the data of two paths. 

 

15 minutes ago, hobiew said:

I would really rather stick with GSAP for these animations

Using Pixi.js does not mean not using GSAP. Pixi.js is just a way of rendering things to a canvas element and you can use GSAP to tween values inside Pixi, using our helper plugin https://gsap.com/docs/v3/Plugins/PixiPlugin/

 

17 minutes ago, hobiew said:

it says I can use the morphSVG in  local enviroment to test it out. I'm unsure on how do this to be honest. Any link to a guide on how to install this locally

Follow the install helper on the docs https://gsap.com/docs/v3/Installation and check "I'd like to trial the Club Plugins". If you then open the url to your project in your browser you can freely use all the plugins. Running your server on 127.0.0.1 and or having a domain ending in .local would work. But for demo's I would stay on Codepen, much easier to ask for feedback and there all the plugins also work. Here is a starter template which loads all the plugins.

 

Hoop dat het helpt en veel geluk met je project! 

 

 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen.

 

[hobiew]

Hi @mvaneijgen  and @Cassie,

 

Thanks for your help! I decided to keep using GSAP and removed the body animation to keep the project simple.
Here’s my dragon animation:

See the Pen vEYGVdz by hobiew (@hobiew) on CodePen.

 

It turned out great! Thanks for your quick responses.

I’m now working on a new challenge. In the second animated section of the website, I want to create a pinned scroll animation. The tricky part is that I want the container below the animated section to slide over it when scrolling.

I tried setting position: fixed on complete, but this didn’t work because pinning the animation wraps my container in a new GSAP container (pin-spacer). Any suggestions on how to achieve this effect?

To clarify: When the scroll animation reaches its end position (or slightly before the end), I want the next container to slide over it instead of continuing with normal scroll behavior.

Current pen: 

See the Pen azbNRaV by hobiew (@hobiew) on CodePen.

Thanks in advance!

 

[mvaneijgen]

 

Looks great! It even looks like the body is moving, but it isn't. What you could do is add a slight scaleY animation to the body (maybe including the arms)  and maybe randomize the movement a bit, so that on each repeat it does something slightly different.  Check out the random() utils function https://gsap.com/docs/v3/GSAP/UtilityMethods/random()

 

Most of the ScrollTrigger effects you see are just moving things on the y-axis instead of scrolling them, then hooking that animation to ScrollTrigger will give the illusion of scrolling, but they are really just animating! Getting to grips with this knowledge will make it so much easier to create all kinds of effects, I've written a whole post about it, check it out:

 

  
So weird seeing Dutch around all the English terms in javascript 😂 nogmaals hoop dat het helpt en veel geluk met je project!

 

[Rodrigo]

Hi,

 

This is one alternative:

See the Pen LEYNXza by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps

Happy Tweening!

[hobiew]

@Rodrigo This looks really really clean and exactly what I want. Will implement it soon into my project thanks again for the quick reply.

 

@mvaneijgen Bedankt man, grappig he! Ik hou graag de id's en classes in het Nederlands soms. Toch even die stempel erop drukken. I will read the article for sure, but for now the solution from Rodrigo looks clean and easy. I already tried the Scaly Y / X transforms, but honestly it kinda messed up the vibe/style. I'm going for more like Carnaval rides / efteling / cut-out animations hahahah. 

 

I will share the final results here for anyone interested. Thanks for helping me out :)! Much love from the Netherlands.

[hobiew]

Thanks for the help guys, helped me a lot. You can see the final website here: http://trueblue-tattooconvention.com/

Had some issues with too many dom elements, so I replaced some SVG with PNG's. Overall happy with the results!

[Rodrigo]

Hi @hobiew!

 

That's a really great site! Love the dragons animations and everything in general 💚

 

Great job! 🥳