[Animating spider]

Thanks! I'll first read the article and if I have more questions. I will return on this.

[Animating spider]

Hi,

 

I am already running into first problem. Moving an element into an SVG element?

I've updated the script with a mousemove event listener. But I cannot move the element inside the SVG.

I guess this is a dummy question, but I need to know ...

 

<circle class="spider-color-pupil pupil pupil-left" cx="50" cy="132.5" r="3.5"/>

TweenLite.to(box, 1, {
    left: xPos * 100, 
    ease: Linear.easeOut,
  });

 

[Animating spider]

Hi,

 

I  would like to use scollMagic in combination with GreenSock.

I would like to animate the svg as follow:

1. On scroll (with scollMagic) start moving the spider and the cord from top (hidden) to bottom (show) with ease. (BounceInOut). (Spider is coming down animation)
2. Random animate the legs a little so they are moving. A little random rotation should be fine.
   (Rotating the legs on the spiders left side, must have center point  on the right/center, to rotate, while legs on the right side, must have center point on the left/center to rotate I guess...)
3. Make the black pupils following the mouse on the screen with ease
4. Rotate the mouth once in a while random with ease
5. optional: Move the spider random up / down after some time with ease.

 

I would like to use the free functions to accomplish this.

 

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

[Moving rocket around earth at specific starting point]

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>

 

[Moving rocket around earth at specific starting point]

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})

 

[Moving rocket around earth at specific starting point]

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.

[Moving rocket around earth at specific starting point]

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.

 

 

[Moving rocket around earth at specific starting point]

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.

[Moving rocket around earth at specific starting point]

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