mikel last won the day on December 16 2017

mikel had the most liked content!


  • Content count

  • Joined

  • Last visited

  • Days Won


mikel last won the day on December 16 2017

mikel had the most liked content!

Community Reputation

513 Leader

Profile Information

  • Gender
    Not Telling
  • Location

Recent Profile Visitors

2,557 profile views
  1. Beginner Question: Planning an Animation

    Hi @jSwtch, The lines 14, 24 and 32 are not necessary - a little mistake ("invalid morphSVG tween value: [object Object]"). The function 'start' unintentionally (?) flashes some objects. Happy tweening ... Mikel
  2. SVG inversing

    Hi @bparticle, I looked at the individual parts of the SVG. https://codepen.io/mikeK/pen/5640f95d0efe846102b806e64b98a5dc/ It is difficult for me to imagine what intermediate levels or which final "picture" should arise. One way to control morphing is if both paths contain the same number of anchor points. Best regards Mikel
  3. Animating different Elements on hover

    Hi @hendrikeng, I prefer this way ... Happy tweening Mikel
  4. Hi @OSUblake, Great - my beer is secured. But that bar is on Mars. Kind regards Mikel
  5. Animating different Elements on hover

    Hi @hendrikeng, surely this pen gives you some suggestions. $ (this) is part of the solution ... Happy tweening ... Mikel
  6. Moving Element to a Position's Relative to Container

    Hi @salas.jsm, Welcome to GreenSock Forum. Please take a look at these explanations: https://greensock.com/position-parameter The positioning of a tween can be selected with several options. Here 2 sec after the end of the last tween: If this does not lead to the desired solution, please let us know. Happy tweening ... Mikel
  7. Hi @OSUblake, Based on your pen (Motion Path Callbacks) I had this idea - still in progress: 'On foot' - that means: classically with my knowledge - I can control the process well. But your camera should be the next trigger ... Thanks and kind regards Mikel
  8. Hi @OSUblake, Hmmm - I understand what you mean. As always, very stimulating ... It takes a little time, but I'll try to implement an idea using the camera. Best regards Mikel
  9. Hi @magyarn, e.g. Jonathan unlocks the secret here: autoAlpha Identical to opacity except that when the value hits 0 the visibility property will be set to "hidden" in order to improve browser rendering performance and prevent clicks/interactivity on the target. When the value is anything other than 0, visibility will be set to "inherit". It is not set to "visible" in order to honor inheritance (imagine the parent element is hidden - setting the child to visible explicitly would cause it to appear when that's probably not what was intended). And for convenience, if the element's visibility is initially set to "hidden" and opacity is 1, it will assume opacity should also start at 0. This makes it simple to start things out on your page as invisible (set your css visibility:hidden) and then fade them in whenever you want. //fade out and set visibility:hidden TweenLite.to(element, 2, {autoAlpha:0}); //in 2 seconds, fade back in with visibility:visible TweenLite.to(element, 2, {autoAlpha:1, delay:2}); Happy tweening ... Mikel
  10. Oooops ...

    Hi @Carl, Please answer me the question about GSDevTools ... By the way: GSDevTools is very helpful. I noticed, however, that in reverse, the centering of the object (pathDataToBezier) is not interpreted expected. Is that due to my coding? Here the reduced egg: Thanks ... Mikel
  11. Hi Plenge / NetBooster, If you want an endless loop, the circle is a good solution. Otherwise could it be this option: ... and you can wave the checkered flag. Mikel
  12. Hi @Plenge, Welcome to GreenSock Forum. Here just a quick and dirty what I think you want to execute (?) ... Happy tweening Mikel
  13. how can i add empty time in timeline?

    Hi @singlexyz, I'm not sure what you want to achieve ("empty time"?). Here is a variant (?): Please have a look to these positioning options: tl.staggerTo(myArray, 1, {left:100}, 0.25); //appends to the end of the timeline tl.staggerTo(myArray, 1, {left:100}, 0.25, 2); //appends at exactly 2 seconds into the timeline (absolute position) tl.staggerTo(myArray, 1, {left:100}, 0.25, "+=2"); //appends 2 seconds after the end (with a gap of 2 seconds) tl.staggerTo(myArray, 1, {left:100}, 0.25, "myLabel"); //places at "myLabel" (and if "myLabel" doesn't exist yet, it's added to the end and then the tweens are inserted there) tl.staggerTo(myArray, 1, {left:100}, 0.25, "myLabel+=2"); //places 2 seconds after "myLabel" Happy tweening ... Mikel
  14. animating circle shape

    Hi @OSUblake, I find the 'peaceful' use of a military computer very remarkable. By the way: the movie VERTIGO is worth seeing. We Shall Overcome Mikel
  15. animating circle shape

    Hi @OSUblake, I only say VERTIGO ... "For the title sequence to Vertigo, Hitchcock had an additional, often unnoted, collaborator: John Whitney. A pioneer of computer animation who worked in television in the 50s and 60s and in the 70s created some of the first digital art, Whitney was hired to complete the seemingly impossible task of turning Bass’s complicated designs for Vertigo into moving pictures. A mechanism was needed that could plot the shapes that Bass wanted, which were based on graphs of parametric equations by 19th mathematician Jules Lissajous; plotting them precisely, as opposed to drawing them freehand, required that the motion of a pendulum be linked to motion of an animation stand, but no animation stand at the time could modulate continuous motion without its interior wiring becoming tangled. To solve this problem, Whitney made use of an enormous, obsolete military computer called the M5 gun director. The M5 was used during World War II to aim anti-aircraft cannons at moving targets. It took five men to operate it on the battlefield, each inputting one variable, such as the altitude of the incoming plane, its velocity, etc. Whitney realized that the gun director could rotate endlessly, and in perfect synchronization with the swinging of a pendulum. He placed his animation cels on the platform that held the gun director, and above it suspended a pendulum from the ceiling which held a pen that was connected to a 24-foot high pressurized paint reservoir. The movement of the pendulum in relation to the rotation of the gun director generated the spiral drawings used in Vertigo’s opening sequence. The M5 weighed 850 lbs and comprised 11,000 components, but its movement was dictated by the execution of mathematical equations; it was very much a computer. Whitney’s work on the opening sequence for Vertigo could be considered an early example of computer graphics in film—and a clever détournement of military equipment." (more here) Were you already active then? Kind regards Mikel