mikel

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

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

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

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

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

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

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

Hey Zach, For your explanation you deserve a bloom. https://codepen.io/mikeK/pen/KKwoOBQ Kind regards Mikel

Hey, Just an alternative https://codepen.io/mikeK/pen/povLxvx happy tweening ... Mikel

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

Do you mean it should look like a filmstrip? https://codepen.io/mikeK/pen/qBEoxRZ

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

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

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

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