[Automatically scroll the window when the mouse approaches the viewport edge]

 

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.

 

See the Pen gOoYgbx?editors=0010 by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

 

[Vector-Effect: Non-Scaling-Stroke messing with DrawSVG]

 

And: If the path is on edge, the SVG set overflow:visible.

 

See the Pen ExbqGVX by mikeK (@mikeK) on CodePen

[Vector-Effect: Non-Scaling-Stroke messing with DrawSVG]

Hey @MadG,

 

Instead of lines (seemingly a problem - will be checked) use paths and put the value directly into the path data.

 

See the Pen RwWOKmy?editors=1010 by mikeK (@mikeK) on CodePen

 

Happy drawing ...

Mikel

 

 

[Automatically scroll the window when the mouse approaches the viewport edge]

 

Hey Blake,

 

Thanks. Your vote honors me.

 

Mikel

[How to reset Reverse() ?]

 

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

[How to reset Reverse() ?]

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
...

 

See the Pen KKyOXBB?editors=1010 by mikeK (@mikeK) on CodePen

 

The world is colorful ...

Mikel

 

[How i can do this with gsap?]

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.

 

See the Pen VwrozKE??editors=0100 by mikeK (@mikeK) on CodePen

 

Happy starting a CodePen ...

Mikel

 

[Automatically scroll the window when the mouse approaches the viewport edge]

 

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.

 

See the Pen dqWRXB?editors=1010 by mikeK (@mikeK) on CodePen

 

It's so much fun...

Mikel

 

 

[Sprite image animation speed - Animation goes jumpy]

 

Just because it blobs so well ...

 

See the Pen ExbBNPz by mikeK (@mikeK) on CodePen

 

Happy morphing ...

Mikel

[Sprite image animation speed - Animation goes jumpy]

 

... and a simple test

 

See the Pen XWzwgQV??editors=1010 by mikeK (@mikeK) on CodePen

 

Happy morphing ...

Mikel

 

 

[Multiple onStart or onComplete functions]

Hey @PG1,

 

Do you mean something like the .call() function?

 

Happy calling ...

Mikel

 

 

[Sprite image animation speed - Animation goes jumpy]

Hey @kodralex,

 

It could be an alternative to morph such a line art.
Here is an example with some effects.

 

See the Pen MPErbd by mikeK (@mikeK) on CodePen

 

Happy morphing ...

Mikel

 

 

[ARRAY + RANDOM + REPEAT]

Some logic and here we are ...

 

See the Pen yLPrNKy?editors=1010 by mikeK (@mikeK) on CodePen

 

Sun is shinning and in a few minutes I am out of home ...

Mikel

 

[ARRAY + RANDOM + REPEAT]

 

 

No problem ...

 

Or

 

See the Pen rNYbVNN by mikeK (@mikeK) on CodePen

 

The big choice ...

Mikel

[ARRAY + RANDOM + REPEAT]

Hey @sango10,

 

There are a lot of possibilities ...

 

See the Pen QWOPwVB by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

 

 

[ARRAY + RANDOM + REPEAT]

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:

 

See the Pen yLgOMbm by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

 

 

 

["Sprite" animation]

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

 

[Progressing a trigger across sections]

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

 

[Start nested timeline in one timeline and resume in another?]

Hey @void__,

 

Try to toggle a timeline. Here an example.

 

See the Pen rNWWMGz by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

 

 

[How i can do this with gsap?]

Hey @Poylar,

 

It could be implemented like this.

 

See the Pen ZEaPamo by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

 

 

[Issues with reversing paths for DrawSVG]

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.

 

See the Pen NWwJGad??editors=0010 by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

 

 

 

["Sprite" animation]

Hey @Samuele

 

This could be a way ...

 

See the Pen qBVgQNL??editors=1100 by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

 

 

[SplitText cuts off characters on Safari]

 

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

 

 

[Slider indicators]

Hey @mea_culpa,

 

... a simple example

 

See the Pen jOadzLL by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

 

 

[SplitText cuts off characters on Safari]

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