[MotionPathPlugin — Reset path onRepeat]

Thanks, Cassie! 

 

I'll have a look at the ModifiersPlugin, but I guess I'll just go with the solution of creating a new tween each time. 

 

[MotionPathPlugin — Reset path onRepeat]

Hi, 

 

I have an element (a pony) that moves along a random path, flips and returns. I would like to recalculate that path each time the pony returns. I tried to work with vars.motionPath.path, but the new path isn't applied to the tween ... (see my comments in the code)

I there another way to update the path on the fly?

 

Thanks so much, 

Robert

See the Pen eYMBLqz by rob83 (@rob83) on CodePen

[repeatDelay on timeline containing infinite tween]

🤣 Thanks so much, @Carl and @PointC!! That were defenitely helpful answers plus great ideas how to pimp up my game!! Maybe I can convince my boss to go with the fly wars version! 😜

[repeatDelay on timeline containing infinite tween]

Hi,

 

what I would like to achieve is to have the fly flapping its wings for 2 seconds or so, then stop and start flapping again after 5 seconds,...

I know I could use setTimeout and setInterval, but I guess this should also be possible with GSAP properties only...

I tried several combinations but somehow I don't get anywhere. Any ideas? 😬

See the Pen xxXOMpg by rob83 (@rob83) on CodePen

[MotionPathPlugin: Align Item to Array-based path]

Ups, that solution looks like I could have found it in the docs 😬. Sorry for that and thanks, @PointC! 

[MotionPathPlugin: Align Item to Array-based path]

Sorry, maybe it's easier if I use the real example:

See the Pen ExoBWba by rob83 (@rob83) on CodePen

The fly in the codepen should start flying from the right border of the screen.

Now the problem is: if I auto-rotate the fly it flies backwards. I know I could just change the SVG and flip the fly in there, but I thought maybe there another solution in which I can just keep the SVG as it is and tell GSAP to flip the fly during auto-rotation.

[MotionPathPlugin: Align Item to Array-based path]

So far it works well. However I still have one question: how can I determine that the div is autoRotating without flipping the div upside down? Like this:

[MotionPathPlugin: Align Item to Array-based path]

Thanks, @Cassie,

 

I guess in that case I need to convert the array into a path (via arrayToRawPath()) first and then attach it to the DOM?

I'll try that...

 

[MotionPathPlugin: Align Item to Array-based path]

Thanks, @mvaneijgen for the hint with the MotionPathHelper.

However, at the end the path should consist of random coordinates that are computed during runtime. So I can't just use a fixed svg-path.

[MotionPathPlugin: Align Item to Array-based path]

Hi,

I'm having problems aligning an element to the path in the motionPathPlugin.

If I use an array of coordinates as motionPath I'm not able to align the animated div to the path.

I would like to have it look just as the blue svg rect.

If I set "align" to true the result is even worse. 

Furthermore for some reason the animation doesn't stop repeating, although I have set the repeat property to 5.

 

What am I doing wrong?

 

Thanks so much,

Robert

 

See the Pen yLpwvBg by rob83 (@rob83) on CodePen

[Calculate Duration from Element width]

Hi,

 

is it possible to calculate the duration of a tween based on the width of some DOM-Element?

I have something like this:

someTimeline.to(element, {
 width: 0,
 duration: function () { return anotherElement.clientWidth / 290 })
The tween works fine if I put a number to duration. However with the code above the element disappears without animating.

 

Do you have an idea where my mistake is?

 

Thanks so much,

Robert

[Draggable dragClickables:true does not work since 2.1]

This solved the problem! Thanks again!

[Draggable dragClickables:true does not work since 2.1]

Sorry, still have a little issue:

If I "throw" the content to the left and resize the window to > 768px the two images are shifted to the left (since the inline style still remains). You can reproduce that behavior in my codepen above.

 

I know customers usually don't resize their browser window back and forth but unfortunately there are some devices (like iPhone X) that exceed the 768px viewport width in landscape.

I fixed this very simply by resetting the transform property on window resize: 

window.onresize = function () {
    document.querySelector($content).style.transform = 'translate3d(0px, 0px, 0px)'
};

 

However now I have a different strange behavior: if I turn the screen back into portrait I'm able to dragged the content out of the container (see gif below). Looking at the properties in the dev tools I see that the transform property after dragging to the left is set to:

translate3d(-594px, 0px, 0px);

 

The maximum (and/or minimum) value should be translate3d(-279px, 0px, 0px) in case of the iPhone X.

 

Did I do something wrong by setting the transform-value on window resize? Is there a better (and waterproof) solution how to handle this?

 

Thanks so much!

[Draggable dragClickables:true does not work since 2.1]

Thanks, @GreenSock, now it's working.

Btw. the thing you missed was that the codpen was working for me as well. That was actually the strange thing: If I copy-pasted the code from the pen into my local project it stopped working.

But now it's all good.

Thanks again!

[Draggable dragClickables:true does not work since 2.1]

Hi,

 

for me dragClickables is still not working — neither in version 2.0.2 nor in 2.1.

 

I would like to have 2 images turn into a slider if the viewport is < 768px (see attached image).

The animation works fine, only the dragClickables doesn't have any effect. If my draggable item is an <a> tag it stops working.

 

The interesting thing about it is: If I copy-paste my code into a codepen (see below) everything works fine. But in my (Laravel-) environment it's not working (unless I turn the <a> into a <div> or something else).

 

I'm importing GSAP via NPM. I also tried to import the files from a local folder (not node_modules) but without success. Unfortunately I'm not able to use the beta-file Jack @GreenSock posted above — at least not by importing it as module.

 

I know it's hard to help me in my case since you would have to have look into my real project. But maybe anyone else encountered a similar problem and found a solution. ?

 

Thanks so much,

Robert 

 

P.S.: Quick note concerning the pen: you have to open it in codepen in order to drag the viewport to less than 768 px

 

See the Pen zbrJrj by rob83 (@rob83) on CodePen

 

[Reverse Function Not Working As Expected]

This was the hint I needed.

Thanks so much, Carl!

[Reverse Function Not Working As Expected]

I have a Dropdown Navigation with sub-menu-points that are revealed on click.

For this I created a timeline with 2 tweens:

1. A tween that changes the height and opacity of the next menu points
2. A tween that animates the menu points from left to right.

 

The forward animation works fine but the reverse function only reverses the second tween — however without any animation. The first tween isn't reversed at all.

 

Any idea on what I did wrong?

 

Thanks so much.

See the Pen VqGROw by rob83 (@rob83) on CodePen