Jump to content


  • Posts

  • Joined

  • Last visited

Recent Profile Visitors

650 profile views

robs's Achievements

  1. 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.
  2. 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
  3. 🤣 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! 😜
  4. 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? 😬
  5. Ups, that solution looks like I could have found it in the docs 😬. Sorry for that and thanks, @PointC!
  6. Sorry, maybe it's easier if I use the real example: https://codepen.io/rob83/pen/ExoBWba 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.
  7. 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:
  8. 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...
  9. 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.
  10. 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
  11. 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
  12. 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!
  13. 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!
  14. 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