bowen192

Ridiculously simple back to basics question

Recommended Posts

I've just started into looking into animating some of my illustrations, inspired by an animation I saw on the BBC website earlier:

 

https://www.bbc.co.uk/news/world-asia-china-41206772#responsive-iframe-newsspec-17131-china-railways-bridge-laying

 

The above was made in GreenSock. I really like the idea behind it and want to get on board.

 

I understand basic coding and I understand the basic tutorials completely, but I'm missing the step before; how do I import my illustrations so I can ease it all in and out? How do I add layers etc.

 

I would appreciate anything here, just point me to a tutorial or program if need be.

Share this post


Link to post
Share on other sites

Hi @bowen192 :)

 

Welcome to the forum.

 

Yep - asset prep is super important. I'm not 100% sure I understand what you're asking. Are you asking which vector software to use? If that's the case, I recommend Adobe Illustrator.  While it's not perfect, it is the industry standard. If you don't want to subscribe to Adobe Creative Cloud, there are other options. I know some people use Inkscape. I have no experience with it, but you can check out their website.

https://inkscape.org/en/

 

If your question relates more to 'how to export for SVG animation', I wrote a little piece about how to do that with Adobe Illustrator.

 

Hopefully that gets you started. Happy tweening.

:)

 

  • Like 5

Share this post


Link to post
Share on other sites

For all things svg follow Craig's advice above. Based on the example you showed, the best approach is probably svg.

 

Depending on the nature of your illustrations, for instance if they are not made up of vector artwork or suitable for creation as vectors,  you can also prepare them as pngs with transparency. Typically you'd use Photoshop, but I'm sure there are other software options if you do a little research.

 

  • Like 5

Share this post


Link to post
Share on other sites

Thanks Mr C

 

I've created the illustrations (in Illustrator competitor Affinity Designer) and exported them to SVG.

 

It's the next stage I don't get; How do I view this illustration and amend in code? For example, in the basic tutorial video, the logo is already part of a webpage and is being changed.

 

If all I have is the SVGs, what do I do next? Add it to a webpage?

 

Don't forget, I'm coming at this from an illustrator's perspective, so be gentle.

Share this post


Link to post
Share on other sites

Yes, you would place the SVG code on the web page between the <body> tags. You could add it as an image too but that won't allow you to easily animate all the child elements. If you want to get started, I'd recommend forking this pen which loads everything you need to get started:

 

Then just delete everything in the HTML, CSS and JS panels.  Paste your SVG code into the HTML panel and your image should be visible.

 

Does that make sense?

 

If you'd like to create a demo from scratch, check out this post:

 

Happy tweening.

:)

 

  • Like 3

Share this post


Link to post
Share on other sites

Great stuff.

 

So basically forking the pen allows you to add pre-programmed javascripts to your CodePen?

 

You can then use a series of commands to create animation special effects such as bounce, outlining etc.?

 

I think I get this now.

 

I appreciate your help. Always difficult explaining something so complex to someone with little or no knowledge. :)

Share this post


Link to post
Share on other sites
Quote

So basically forking the pen allows you to add pre-programmed javascripts to your CodePen?

 

Ya codepen can be really handy to do any experiments quickly. You can fork any pens that are public or you can also create templates as you prefer. Check out their docs and FAQs.

 

Quote

You can then use a series of commands to create animation special effects such as bounce, outlining etc.? 

 

 

Yes you will be able to perform all kinds of 2D animations using SVG. If you are familiar with any kind of animations and little bit of JavaScript then it will be easy to get going.

 

I would recommend visiting the learning page and GreenSock's youtube channel to get started. https://www.youtube.com/user/GreenSockLearning

 

There is also a video tutorial course by @Carl, https://www.nobledesktop.com/html5-greensock-video-class-gsap?a=ox7 I don't know if it covers SVG in detail but any 2D animations you perform on regular HTML elements can be performed on SVG elements. Then there are a bit advanced effects like drawing or morphing shapes that let you animate paths using DrawSVG and MorphSVG plugins.

 

Finally go through the SVG Gotchas thread so it will save you a lot of time in future.

  • Like 6

Share this post


Link to post
Share on other sites

Cheers, Sahil. 😀

  • Like 1

Share this post


Link to post
Share on other sites

I'm a bit lost now. Still in the fundamentals.

 

How do I point/apply the code to my image, like here?

 

1vEbk6v.png

 

Here's what I have imported from Affinity Designer:

 

 

Share this post


Link to post
Share on other sites

Right now you have a circle in the SVG. You can target that circle like this:

 

Make sense?

 

Happy tweening.

:)

 

  • Like 4

Share this post


Link to post
Share on other sites

Ahh, of course. 

 

The whole point of importing the SVG file is that you can target individual items; I was trying to work the whole SVG file. :rolleyes:

 

Cheers Mr C.

  • Like 1

Share this post


Link to post
Share on other sites

Yep - you can target any of the elements, paths, groups, filters etc. inside the SVG, but you can also target the SVG itself. In some cases that may be exactly what you want. In those situations you just target the SVG like any other DOM element. 

 

Happy tweening.

:)

 

  • Like 4

Share this post


Link to post
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.