Jump to content
Search Community

Ridiculously simple back to basics question

bowen192

By bowen192
in GSAP

Moderator Tag
 Share

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

bowen192

bowen192

Posted
Posted

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.

PointC

PointC

Posted
Posted

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
Visual-Q

Visual-Q

Posted
Posted

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
bowen192

bowen192

Posted
  • Author
Posted

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.

PointC

PointC

Posted
Posted

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:

 

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

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
bowen192

bowen192

Posted
  • Author
Posted

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. :)

Sahil

Sahil

Posted
Posted
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
bowen192

bowen192

Posted
  • Author
Posted

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:

 

See the Pen mjXPqo by bowen192 (@bowen192) on CodePen.

 

PointC

PointC

Posted
Posted

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

 

See the Pen jpZLzJ by PointC (@PointC) on CodePen.

Make sense?

 

Happy tweening.

:)

 

  • Like 4
bowen192

bowen192

Posted
  • Author
Posted

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
PointC

PointC

Posted
Posted

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

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
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...