Animating spider

[Lanceken]

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

[ZachSaucier]

Hey Lanceken! 

 

5 minutes ago, Lanceken said:

I would like to animate the svg as follow:

Great, go for it! Unfortunately we don't have time to build out all animations for anyone who asks. We can help you if you get stuck though. Even though ScrollMagic isn't a GreenSock product and we don't support it here, this post may help you with that part:

The rest of the animations should be independent from the scrolling animation. 2, 4, and 5 can be done with regular tweens and timelines. 3 you should probably do using a mousemove listener and using .set() or .quickSetter() calls. 

 

Hope that helps. We're here to help if you run into any particular issues. Please keep any demos focused on the issue that you post about at that time  Happy tweening.

[Lanceken]

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

 

[ZachSaucier]

It looks like you need to do a bit of reading  SVG is not positioned in the same way as regular HTML. It has its own coordinate and layout system. As you can see in the code that you posted, that element is positioned using cx and cy. So to change how it's positioned you either need to change those values or change the transform attribute. 

 

I highly recommend reading through the articles on the SVG coordinate system by Sara Soueidan.

 

I also highly recommend using GSAP 3 - I think you'll like the simplified format!

[Lanceken]

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