Jump to content
Search Community

Moving rocket around earth at specific starting point

Lanceken test
Moderator Tag

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

Hi,

 

I am new to this.

I've created a world globe, that is rotating.

I would like to create a rocket that is rotating around the world in the other way.

That is working fine. But I would like to set the starting point at the bottom.

Now it is starting at the top. Is that possible.

 

    var R = 610;
    TweenMax.to("#rocket2", 5, {
        bezier: {
            curviness: 1.5,
            values: [{x: 0, y: 0},
                {x: -R / 2, y: R / 2},
                {x: 0, y: R},
                {x: R / 2, y: R / 2},
                {x: 0, y: 0}
            ],
            autoRotate: 90,
        },
        ease: Linear.easeNone,
        repeat: -1
    });

 

 

See the Pen oREqPK by Lanceken (@Lanceken) on CodePen

Link to comment
Share on other sites

38 minutes ago, ZachSaucier said:

Hey Lanceken and welcome to the forums!

 

Do you have a CodePen of the project that you can share with us? It would make us helping you easier.

 

Hey,

 

I've just added the codepen example.

Link to comment
Share on other sites

One way to do it is to .set the original position of the rocket to the bottom and then change the order of your bezier path to match, like so:

 

var R = 610;
TweenMax.set("#rocket", { y: R });
TweenMax.to("#rocket", 5, {
    bezier: {
        curviness: 1.5,
        values: [
            {x: 0, y: R},
            {x: R / 2, y: R / 2},
            {x: 0, y: 0},
            {x: -R / 2, y: R / 2},
            {x: 0, y: R}
        ],
        autoRotate: 90,
    },
    ease: Linear.easeNone,
    repeat: -1
});

 

See the Pen EzQLvx?editors=0010 by ZachSaucier (@ZachSaucier) on CodePen

Link to comment
Share on other sites

Hi,

 

The solution of @ZachSaucier is what I needed.

@mikel That looks very nice, I will look into it, but for now it is out of scope :)

 

I have an other two questions related to this.

First, as you can see, I need te center the earth and the Bezier so that both are aligned to center. And I need to set the position for left and top for both of them.

What is the best way to accomplish this?

 

(solved:) Second, if you do not add a tween on the rocket, it is visible on the screen, static, that is not ok. I need to hide it, or if possible position the rocket in the right position (bottom) without starting the tween. I found a parameter "pauze", but that did not work ...

 

Thanks for your fast replies.

 

 

Link to comment
Share on other sites

I think the most proper way to do it would be to use a vector editor, place the world and the rocket in the same SVG, create a path around the world (I noticed that the current world SVG mixes the outer circle and the inner continents, which is a hassle), and use GSAP's MorphSVG to move the rocket along the circular path. This is what PointC did below, but you can find a tutorial on how to do so yourself here:

 

https://greensock.com/path-animation

 

With that being said, if this is all you're doing and it doesn't need to be as responsive and you don't need more control over the animation, you don't need a JavaScript animation. You can just use a rotation with a transform origin outside of the rocket like my post on CSS-Tricks talks about. However, using this approach you need to fiddle with the numbers until it looks right, which can take time. Demo of this approach:

 

See the Pen mYXQje?editors=0100 by ZachSaucier (@ZachSaucier) on CodePen

  • Like 2
Link to comment
Share on other sites

I'd just like to point out — having all this in one SVG would make everything easier to control and scale. You can also use the MorphSVGPlugin.pathDataToBezier() method to make your orbit. Using a circle allows you to quickly change the radius to your liking. If you have symmetrical objects in the orbit, you can even change the scale to reverse the orbit direction. 

 

See the Pen wbyYwQ by PointC (@PointC) on CodePen

 

 

Just my two cents. Happy tweening.

:)

 

  • Like 3
Link to comment
Share on other sites

A few thoughts...

 

If you want to have the rocket start at the bottom, you don't even need to mess with any of the bezier values - you could simply set the progress to 0.5 immediately (basically make the animation jump to its halfway-done position). Easy peasy ;)

 

Second, I'd be very careful about following Zach's non-GSAP approach because animating transforms on SVG elements (especially with transform-origin) can get odd results in various browsers, especially Firefox. Using GSAP ensures that you don't have to worry about all that garbage. See my CSS-Tricks article here: https://css-tricks.com/svg-animation-on-css-transforms/

 

I agree with @PointC that it'd be much easier if everything is in the same SVG file. But if you can't do that, here's another approach:

See the Pen 5cbf7b7e89dc30b03919387df42be69e?editors=0010 by GreenSock (@GreenSock) on CodePen

 

I noticed that the rocket SVG had some really strong transforms and the sizing was odd (to me at least), so I cleaned that up. I rotated that <g> inside the rocket, and then set the transform-origin of the <svg> to the center of the earth, and then just rotated it. No need for any bezier paths. 

 

I hope that helps. ?

  • Like 3
Link to comment
Share on other sites

2 hours ago, GreenSock said:

Second, I'd be very careful about following Zach's non-GSAP approach because

 

Gotta be honest — I thought that sentence was gonna end with "we don't allow CSS animations around here." ?

 

Since Zach has a shiny new GreeenSock Admin badge, it's probably time to dust off the chalkboard.

 

ejRk29k.jpg

  • Haha 3
Link to comment
Share on other sites

Hi,

 

Thanks for all the helpful information so far.

 

Some remarks:

1/ Must be responsive

2/ @ZachSaucier The rocket will follow the path around the earth after a click action (not only CSS)

3/ I prefer to use the free version, the MorphSVGPlugin is not free (I understand why)

4/ @GreenSock I understand that you need the MorphSVGPlugin if you combine both in one SVG file right? Let me first check your CodePen example.

Link to comment
Share on other sites

9 minutes ago, Lanceken said:

@GreenSock I understand that you need the MorphSVGPlugin if you combine both in one SVG file right? Let me first check your CodePen example.

 

Nah, you don't need MorphSVGPlugin unless you're actually morphing something or if you need to convert an existing <path> into motion path data for BezierPlugin. But you're just animating in a circular shape which is totally possible without a motion path at all - you could just use transformOrigin and rotation. 

  • Like 2
Link to comment
Share on other sites

I was wondering why Edge is running very slow when rotating the world. I've wrapped it within a div with overflow hidden.

The browser becomes buggy and the world is not rendering properly. I thought it was because of other animations, but I have disabled them.

 

Rotating the rocket around the world seems to be ok, so there must be something wrong with the svg I've used? Too complex?

 

I only have basic css and the tweening function for the world:

TweenMax.to(".world", 60, {rotation: 360, ease: Linear.easeNone, repeat: -1})

 

2019-05-27_9-16-58.jpg

Link to comment
Share on other sites

Hi @mikel,

 

I found the issue.

The css drop shadow filter value on the svg is buggy...

 

Please check below in Edge. (Anyway I need to have an other solution, because it is not supported by IE11).

See the Pen eaKgeg by Lanceken (@Lanceken) on CodePen

 

Update:

This could be a solution (it works for Edge, but on retina displays, it slows down, not smooth ... (using filter on SVG)

 

<defs>
    <filter id="sofGlow" height="300%" width="300%" x="-75%" y="-75%">
        <!-- Thicken out the original shape -->
        <feMorphology operator="dilate" radius="4" in="SourceAlpha" result="thicken" />
        <!-- Use a gaussian blur to create the soft blurriness of the glow -->
        <feGaussianBlur in="thicken" stdDeviation="10" result="blurred" />
        <!-- Change the colour -->
        <feFlood flood-color="rgb(255,255,255)" result="glowColor" />
        <!-- Color in the glows -->
        <feComposite in="glowColor" in2="blurred" operator="in" result="softGlow_colored" />
        <!--    Layer the effects together -->
        <feMerge>
            <feMergeNode in="softGlow_colored"/>
            <feMergeNode in="SourceGraphic"/>
        </feMerge>
    </filter>
</defs>

 

Link to comment
Share on other sites

Filters and things like drop-shadow are notoriously CPU hogs. If I were you, I'd probably just create a PNG raster image of just the blur, and drop that behind the SVG. That way, there are no filters at all - it's just a plain image that can even be GPU-accelerated. 

  • Like 1
Link to comment
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.
×
×
  • Create New...