Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

mikel last won the day on January 4

mikel had the most liked content!


  • Content Count

  • Joined

  • Last visited

  • Days Won


Everything posted by mikel

  1. mikel

    The locomotive

    Hey Zach, With a different approach (including svgOrigin) it now runs perfectly on the 'wheel'. But the problem has shifted to the other side. However, the effects here are minimal. https://codepen.io/mikeK/pen/GRgYaVJ Kind regards Mikel
  2. mikel

    The locomotive

    Hey Zach, It is a slight offset on the x axis. Unfortunately I can't find a solution with trial and error. https://codepen.io/mikeK/pen/WNbaeJR Here is the same start / stop function with gsap 3.0. https://codepen.io/mikeK/pen/VwYEpeW Thanks for your engagement. Mikel
  3. mikel

    The locomotive

    Hey Zach, Thanks to your code, I have clearly progressed in understanding. Just for fun and learning I have a question: How does the 'yValue' value come about? Can it be calculated? It doesn't turn around precisely. https://codepen.io/mikeK/pen/WNbaeJR I use gsap 2.0 for this case because I like the 'old' smooth start / stop function and cannot do this with 3.0. The locomotive is already under construction. But here I have to specify the alignment of the parts. https://codepen.io/mikeK/pen/bGNjjyZ Kind regards Mikel
  4. mikel

    Seamless Rotation

    Hey Zach, Unfortunately there is no reference to default "power1.out" on the page EASES. Kind regards Mikel
  5. mikel

    Seamless Rotation

    Hey @hmerscher, Yes, you have to set an individual ease - in your case ease: 'none' - because the default is "power1.out". From the docs: ease Controls the rate of change during the animation, giving it a specific feel. For example, "elastic" or "strong.inOut". See the Ease Visualizer for a list of all of the options. ease can be a String (most common) or a function that accepts a progress value between 0 and 1 and returns a converted, similarly normalized value. Default: "power1.out". The gsap code in your pen is gsap/1.19.0. And here a cool "wagon-wheel" effect: https://codepen.io/dansinni/pen/yxOeXK Happy tweening ... Mikel
  6. Hey @shalanah, Welcome to the GreenSock Forum. Apparently both coordinates - x and y - have to be listed. Why? @GreenSock could answer that. https://codepen.io/mikeK/pen/eYmKBXw Happy tweening ... Mikel
  7. mikel

    In whatever order

    Hey @Zahir Rafiq, Another concept. https://codepen.io/mikeK/pen/abzGjJJ The first run (Rerun codePen) is sometimes not as expected. I do not know why. Happy tweening ... Mikel
  8. Hey Zach, For your explanation you deserve a bloom. https://codepen.io/mikeK/pen/KKwoOBQ Kind regards Mikel
  9. Hey, Just an alternative https://codepen.io/mikeK/pen/povLxvx happy tweening ... Mikel
  10. Hey Ebinabo, it could be var ww = $(window).innerWidth(), boundLeft = ww - 2250; // take the width of the BOX Draggable.create('.draggable', { bounds: {minX:0, maxX:boundLeft}, type: 'x' }) https://codepen.io/mikeK/pen/OJPvEmv And you need a window resize logic. Happy bounding ... Mikel
  11. Do you mean it should look like a filmstrip? https://codepen.io/mikeK/pen/qBEoxRZ
  12. Hey Fernandofas, By the way this animation doesn't need a drawSVG.plugin. The effect is achieved by different strokeDasharray values. Please check whether you have downloaded DrawSVGPlugin3 ! Otherwise use the direct link https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin3.min.js Kind regards Mikel
  13. Hey @fernandofas, Please use this link https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin3.min.js See install helper here Don't forget to register the plugin like this in your project: gsap.registerPlugin(DrawSVGPlugin); Happy using gsap 3.0 ... Mikel
  14. Hey @ebinabo, Do not 'limit' the value left to -100. Try for example this Draggable.create('.draggable', { bounds: {right: 0, left: -1300}, type: 'x' }) Happy dragging ... Mikel
  15. mikel

    change img on hover

    Hey @FearMe4va, How about this option? https://codepen.io/mikeK/pen/ExaExMR Happy fading ... Mikel
  16. mikel

    change img on hover

    Hey @FearMe4va, You could build up the motif change like this. https://codepen.io/mikeK/pen/YzPemJW Happy tweening ... Mikel
  17. Hey @TELLO, This could be a way https://codepen.io/mikeK/pen/povaYPE That callback starts for the 2. img. For the first you can run a separate tween if needed. Happy tweening ... Mikel
  18. Hey @ViolettaDigitalCraft, This could be an option $('#screen').mouseenter(function(){ gsap.set(ball, {fill:'green'}); gsap.ticker.add(update); }); $('#screen').mouseleave(function(){ gsap.ticker.remove(update); gsap.to(ball, {attr:{cx:145, cy:145}, fill:'red', duration:1}); https://codepen.io/mikeK/pen/ExaQpOp Happy tweening ... Mikel
  19. Hey @Sangam Basnet, Here is an option. Pay attention to the new structure. https://codepen.io/mikeK/pen/QWwQagQ Happy tweening ... Mikel
  20. mikel


    Hey ZACH, Terrific. Chapeau. Let's build a complete locomotive. Best regards Mikel
  21. mikel


    Math and physics have never been my strength. So just a little trial and error. https://codepen.io/mikeK/pen/bGNajzW Maybe I should do a course at @OSUblake. Mikel
  22. mikel


    Hey Zach, Here we go https://codepen.io/mikeK/pen/BayJxMV Happy tweening ... Mikel
  23. Hey @Jean-Tilapin, Check out this post happy tweening ... Mikel
  24. Hey @bootstrap007, Its not a fake - just simple reality. Try and check it changing screen size during the animation is running. Happy testing ... Mikel