mikel

Hey YUNUS, A little too short-sighted. Just the effect in my head. The hover areas can be defined by conditions. There is no need for the three divs. The entire viewport is clickable - test it. https://codepen.io/mikeK/pen/gOoYgbx?editors=0010 Happy tweening ... Mikel

And: If the path is on edge, the SVG set overflow:visible. https://codepen.io/mikeK/pen/ExbqGVX

Hey @MadG, Instead of lines (seemingly a problem - will be checked) use paths and put the value directly into the path data. https://codepen.io/mikeK/pen/RwWOKmy?editors=1010 Happy drawing ... Mikel

Hey Blake, Thanks. Your vote honors me. Mikel

Hey @dazzafact, Sorry, label is not a solution for your case. Another is tl.reversed(); // sets the orientation to reversed tl.play(); See pen above. Mikel

Hey @dazzafact, There are many ways to re-use a complex timeline: .play() and a position parameter, .play() and a label positioned where you want or tween this timeline with many options ... https://codepen.io/mikeK/pen/KKyOXBB?editors=1010 The world is colorful ... Mikel

Hey @Poylar, There are many paths that lead to the goal. Just try something out and show us it in a small CodePen. A small case says more than a thousand words. And I totally agree with Blake: I would suggest going through our Getting Started article. https://codepen.io/mikeK/pen/VwrozKE??editors=0100 Happy starting a CodePen ... Mikel

Such concepts are a tremendous playground. Hey BLAKE, I tried it step-by-step or better edge-by-edge. Complicated calculations are just not my thing. Therefore: The GSAP utils.mapRange() is a really powerful tool. https://codepen.io/mikeK/pen/dqWRXB?editors=1010 It's so much fun... Mikel

Just because it blobs so well ... https://codepen.io/mikeK/pen/ExbBNPz Happy morphing ... Mikel

... and a simple test https://codepen.io/mikeK/pen/XWzwgQV??editors=1010 Happy morphing ... Mikel

Hey @PG1, Do you mean something like the .call() function? Happy calling ... Mikel

Hey @kodralex, It could be an alternative to morph such a line art. Here is an example with some effects. https://codepen.io/mikeK/pen/MPErbd Happy morphing ... Mikel

Some logic and here we are ... https://codepen.io/mikeK/pen/yLPrNKy?editors=1010 Sun is shinning and in a few minutes I am out of home ... Mikel

No problem ... Or https://codepen.io/mikeK/pen/rNYbVNN The big choice ... Mikel

Hey @sango10, There are a lot of possibilities ... https://codepen.io/mikeK/pen/QWOPwVB Happy tweening ... Mikel

Hey @sango10, You could use GSAP SplitText. SplitText makes it easy to break apart the text in an HTML element so that each character, word, and/or line is in its own <div>, making complex animation simple. So split into words and stagger the animation using from: "random". Here an example - using chars: https://codepen.io/mikeK/pen/yLgOMbm Happy tweening ... Mikel

Hey @Samuele, The Dude sprite is ok: width 2000 px, 10 pics. So for your setup you probably need: .viewer { height: 100%; margin-left: auto; margin-right: auto; width: calc(2000px / 10); // !!! background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/doodle-sprite.png"); background-repeat: no-repeat; background-position: 0 50%; } Happy tweening ... Mikel

Hey @Trynix, I'm not sure what it's supposed to be in the end. You can define clear conditions. And GSAP mapRange() will help you: Maps a number's relative placement within one range to the equivalent position in another range. Hopefully it helps. Happy tweening ... Mikel

Hey @void__, Try to toggle a timeline. Here an example. https://codepen.io/mikeK/pen/rNWWMGz Happy tweening ... Mikel

Hey @Poylar, It could be implemented like this. https://codepen.io/mikeK/pen/ZEaPamo Happy tweening ... Mikel

Hey Allen, If the two paths for moving point and tail are identical, both have the same coords, have the same start/end points, there shouldn't be a problem. https://codepen.io/mikeK/pen/NWwJGad??editors=0010 Happy tweening ... Mikel

Hey @Samuele This could be a way ... https://codepen.io/mikeK/pen/qBVgQNL??editors=1100 Happy tweening ... Mikel

Hey @Black Ducas, If you only need to split a short piece of text, then just adjust only the letters with 'overhangs'. Ask the SAFARI team. ... No ideas. Good luck. Mikel

Hey @mea_culpa, ... a simple example https://codepen.io/mikeK/pen/jOadzLL Happy tweening ... Mikel

Hey @Black Ducas, No GSAP bug. From the DOCS: Some browsers (like Safari) apply custom kerning by default between letters, so when characters are split apart and put into their own divs, the spacing is slightly different. A bug has been filed with the Safari team (it’s a browser issue, not SplitText) but you can typically eliminate the differences by setting these CSS properties: ... In your case try: letter-spacing:4.2px; // ??? -webkit-text-rendering: optimizeSpeed; text-rendering: optimizeSpeed; -webkit-transform: translateZ(0); transform: translateZ(0); Happy tweening ... Mikel