Jump to content
Search Community

Lanceken

Members
  • Posts

    9
  • Joined

  • Last visited

Everything posted by Lanceken

  1. Thanks! I'll first read the article and if I have more questions. I will return on this.
  2. 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, });
  3. Lanceken

    Animating spider

    Hi, I would like to use scollMagic in combination with GreenSock. I would like to animate the svg as follow: 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) 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...) Make the black pupils following the mouse on the screen with ease Rotate the mouth once in a while random with ease optional: Move the spider random up / down after some time with ease. I would like to use the free functions to accomplish this.
  4. 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). https://codepen.io/Lanceken/pen/eaKgeg 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>
  5. 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})
  6. 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.
  7. 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.
  8. 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 });
×
×
  • Create New...