Moon Launch - 2 SVGs, Launch SVG 1 from SVG 2

[menschies]

Greetings! My first post so forgive any noobishness... I started my journey with GSAP a week ago, and I'm enjoying the heck out of it. I promise not to abuse the power I'm given. *fingers crossed

 

I'd like to create a scene where a rocket launches from the moon. I created 2 SVGs: moon and space cadet Ollie. I've scoured the forums and read about containing all "images" into a single SVG, but for me it's easier to edit and manage the vector images in separate files -- for now.

 

Can someone please recommend an approach (cross-browser compatible, including mobile) to position the rocket on the moon? Must I use a single SVG?

 

Thank you!

 

(Also, anyone want to help us make our nonprofit landing page?)

See the Pen MOwqgy by macarius (@macarius) on CodePen

[Dipscom]

Hi @menschies !

 

Welcome to the forums!

 

Always remember: With Great Powers, Comes Great Responsibilities. Use them wisely, use them to make things a little bit nicer.

 

A few comments: You can use images instead of inlining the whole SVG if you are not changing the inside of it.

 

The solution to your question is about nesting the separating the elements and nesting them based on your needs.

 

See the Pen Zabbdb by dipscom (@dipscom) on CodePen

 

I'm super busy these days but I wouldn't mind lending a hand whenever possible for your landing page - within limits. I can't take any responsibility at the moment.

[Jonathan]

Hello @menschies and Welcome to the GreenSock forum!

 

Yes i agree with @Dipscom, regarding using images instead. You can use SVG, the only thing is you would have to spend more time with the initial setup. Making your SVG dimensions just fit the elements, like in your case the moon and rocket ship.

 

Also keep in mind since your using CSS position fixed, that you will have cross browser issues and a performance hit when having your elements always in a state of position fixed. If you optimize your SVG so they just have your elements fitting in the whole SVG, you will have more control of positioning cross browser. There are known bugs especially with webkit Chrome and many more position fixed bugs with webkit Apple Safari. You should use position absolute instead so you dont have to deal with position fixed issues.

 

The way it is setup now your SVG's take a whole lot of space, and to get them to line up when in desktop or mobile would require some tinkering with the viewport attribute of each SVG and on resize so it changes automatically to fit your elements based on the browser viewport.

 

With SVG you can only animate using 2D transforms which can not be animated using hardware acceleration for better performance. But if you wrap your SVG with a <div> element than you can animate with 3D transforms.

 

So i believe once you get your SVG child elements compacted to fit within your parent SVG for the moon and your rocket ship it will make animating your moon liftoff more fun and easier to animate. Then you won't have to worry about adjusting the SVG viewport attribute values, or forcing the position of your two SVG's when in a mobile or desktop browser viewport.

 

[menschies]

Thank you @Dipscom and @Jonathan for your guidance.

 

I attempted to use a path defined in the Ollie SVG to animate the position of the rocket and orient it along its trajectory. I wasn't sure how else to achieve this. I noticed the {x,y} coordinates you chose, @Dipscom. How did you derive these, and how can I generate these? Also, the coordinates don't scale with window zoom. Can you apply a factor to these, or is there a better method?

 

Are there any major issues or drawbacks if I use an SVG as a background image in a <div> vs. nesting the SVG within the <div> as an <img>?

 

Thanks for your time and expedient responses!

[OSUblake]

1 hour ago, menschies said:

Are there any major issues or drawbacks if I use an SVG as a background image in a <div> vs. nesting the SVG within the <div> as an <img>?

 

Well, you just discovered one.

 

1 hour ago, menschies said:

Also, the coordinates don't scale with window zoom. 

 

You can usually get better performance animating images instead of a SVG directly, but then you're limited to animating everything as a whole image, because you can't animate stuff inside an image.

 

22 hours ago, menschies said:

(Also, anyone want to help us make our nonprofit landing page?)

 

What kind of stuff are you looking to do?