Need advice to start animation with JavaScript

[battosai14]

Hello as indicated in the title of the subject, I am new to code and I would like to animate a logo in javascript. As I can not find documentation I turn to this community. I realized in an SVG file all the steps of the animation of my logo (I don't know if it's better to put all the images in a single file or if it's better to make a file for each step ). I am now looking for how to make image by image in javascript. I'm used to doing this kind of thing on Flash or AfterEffects but in Javascript I'm totally lost. If you could give me some tips to get me on the right track that would be great. Thank you in advance.

See the Pen wvyByxp by battosai14 (@battosai14) on CodePen

[Cassie]

Hey there! 

 

It's best to think in terms of tweening (like after effects) instead of step by step positions. You will need to add classes or ID's to your elements and then you can target them with GSAP tweens.

Like so.

See the Pen NWyPYQK?editors=1010 by GreenSock (@GreenSock) on CodePen

 

The wine 'splashes' will be harder, you may need to morph shapes which may be a little much to bite off at first, if so - maybe try some opacity fades between the different shapes?

Here's a very accessible article about animating with GSAP - https://css-tricks.com/how-to-animate-on-the-web-with-greensock/

Here's a deep dive into SVG and GSAP - 

 

We try to keep these forums focused on GSAP specific questions and this is definitely a little bit too broad for us to cover in detail here. But if you'd like to join a little SVG animation community to bounce ideas around I have one over here

Hope this helps!

 

[battosai14]

4 hours ago, Cassie said:

Hope this helps!

 

Hello Cassie,

 

Thank you so much for all the advice and information. It's a good start and I hope I can succeed in my project with your help! I am not very comfortable with English but I will browse all these links, and if you wish I will keep you informed of the success of my project! Thanks again !