Jump to content

Lanceken

Members
  • Content Count

    6
  • Joined

  • Last visited

Community Reputation

0 Newbie

About Lanceken

  • Rank
    Newbie

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. 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>
  2. 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})
  3. 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.
  4. 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.
  5. Hey, I've just added the codepen example.
  6. 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 });