[MotionPathPlugin, is it possible to animate the path itself?]

Hey @Debsfx,

 

sorry, my example was too complex.
Reduced here to the MotionPath function and synchronization.
However, with an 'EGG'. It's almost Easter.

 

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

 

Happy tweening ...

Mikel

 

 

 

[Stop infinite animation at a specific position]

 

Cool. For the archive

 

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

[Stop infinite animation at a specific position]

Hey,

 

You need a clever condition.
I love GSAP Draggable.hitTest

 

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

 

Is this what you expect?

Edit: you need a second condition for 'toLeft' !!

 

Happy tweening ...

Mikel

 

[Stop infinite animation at a specific position]

Hey @NikitaKurnosov,

 

There may be several solutions:

 

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

 

Happy tweening ...

Mikel

 

 

[MotionPathPlugin, is it possible to animate the path itself?]

Hey @Debsfx,

 

Here's an example: sync 'moving wave' and a point.

 

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

 

Do you mean something like that?

 

Happy tweening ...

Mikel

[YOYO animation to start when ScrollTrigger timeline is paused]

Hey @cesare.polonara

 

Welcome to the GreenSock Forum.

I tried to solve a similar intention.

 

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

 

Ti aiuta?

Happy tweening ...

Mikel

 

 

 

[Animating Clip Path Polygon]

Hey @JPM82,

 

That might have something to do with the pseudo element.
But I have no idea - not my area.

 

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

 

Happy tweening ...

Mikel

 

[CSS filter property resetting after GSAP animation]

Hey @FourteenEightEight,

 

Welcome to the GreenSock Forum.

 

Hmm, a demo of the problem - as Trapti said - would be great.
In this case no issue.

 

See the Pen BeQNRe?editors=0110 by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

 

 

[Would it be possible to make animation like below?]

Hey @Ajaykr089,

 

Welcome to the GreenSock Forum.

Here are some hints about 3d transforms

 

And here's a little example:

 

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

 

Happy tweening ...

Mikel

[Reset animation when scroll up]

Hey @shilpa_gz,

 

It's really not easy to understand your intentions exactly: What should happen, when and how?

 

Here's an example:
- the first text fades in shortly after the scrolling process begins (CSS: h1 is visibility:hidden; )
- special version scrollUp: if (self.direction === -1 && self.progress > 0.85). Fast rewind only from the last part.
- like fading the texts, you could also show the pictures of the snowball

 

See the Pen zYPRNOj?editors=0110 by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

[Liquid Slider - to Draggable]

Hey,

 

I like it as a morph animation.
Sorry if the path design isn't optimal.
Should / could be a carrot.

 

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

 

Happy morphing by onpointermove ...

Mikel

 

 

[Animate to a specific position on a circle path]

 

Hey Saif,

 

Successful experiments are the most fun.
The pen above has been revised again.

 

Happy trying for the better one ...

Mikel

 

[Animate to a specific position on a circle path]

 

Just a fun alternative:

 

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

 

Happy tweening ...

Mikel

 

 

[Animate Box Shadow on ScrollTrigger]

Hey, Superfein,

 

from the DOCS ScrollTrigger:

Percentages and pixels are always relative to the top/left of the element/viewport. 
You can also define a single relative value like "+=300" 
which means "300px beyond where the start is", 
or "+=100%" means "the height of the scroller beyond where the start is". 
"max" is a special keyword indicating the maximum scroll position.

 

What exactly is unclear? 

[Animate Box Shadow on ScrollTrigger]

Hey Rodrigo,

 

Exciting you is a nice glow!

 

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

 

Thanks

Mikel

[Motion Path]

Hey YAYA,

 

//give the timeline and child tweens their own id. Here an example:

var tl = gsap.timeline({id: "timeline"})
tl.to(".orange", {duration: 1, x: 700, id: "orange"})
  .to(".green", {duration: 2, x: 700, ease: "bounce", id: "green"});

// Now each id shows up in the animations menu "Global Timeline" as popup.

Does this help you?

 

Mikel

[Animate Box Shadow on ScrollTrigger]

 

... another option

 

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

 

 

[Animate Box Shadow on ScrollTrigger]

Hey @Superfein,

 

If you create the glow with a separate path, you can of course animate this path.

 

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

 

Happy tweening ...

Mikel

 

[Animate Box Shadow on ScrollTrigger]

 

Here is an example with a glow image:

 

See the Pen OJOZPdz??editors=1000 by mikeK (@mikeK) on CodePen

 

Happy glowing ...

Mikel

 

 

[Underline animation on gsap text animation]

Hey @Yannis Haismann,

 

There is always an alternative. Here is an example with GSAP SplitText, where individual letters are animated.

This also works with single, concrete words.There is always an alternative. 

 

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

 

Happy splitting ...

Mikel

 

[Motion Path]

Hey @Yaya,

 

You need  MotionPathPlugin.convertToPath("circle, rect, ellipse, line, polygon, polyline");

and for the circle a closing  > 

Plus: an overflow:visible for this SVG.

 

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

 

A MotionPath animation based on a circle starts at 3 o'clock.

You could rotate the circle as you need in advance.

 

Happy tweening ...

Mikel

[keep adsorption element with window resize]

Hey @lich0320,

 

Take a look at GSAP Flip.

 

Happy flipping ...

Mikel

[Morphing to outline]

 

Hey @samwatts1988,

 

What should be morphed to what result is not really clear to me.

Here is just one interpretation

 

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

 

Happy tweening ...

Mikel

 

[Morphing to outline]

Hey @samwatts1988,

 

do you mean this?

 

#start{  // add a stroke
  stroke:#f49969;
  stroke-width:3px;
}

// and then tween the fill to transparent
tl.to( '#start', { fill:'transparent', duration: 1.5, morphSVG: '#end' } );

 

And here another prep of the path:

 

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

 

Happy tweening ...

Mikel

[Random floating effect that moves to a static position on scroll.]

Hey Jack,

 

I had also tried - but I failed with the ScrollTrigger. So here's a little joke ...

 

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

 

Happy tweening ...

Mikel