Jump to content


  • Posts

  • Joined

  • Last visited

About blueblau

Recent Profile Visitors

1,626 profile views

blueblau's Achievements

  1. Ah great. I will try to add this tomorrow, when I'm back at the office. Thanks! 💪 Will get back to you to know how it went.
  2. Hi, thank you for helping out. It's just a static presentation, so I actually ended up looping through the path length and finding the point on the path where Y were closest to the Y of the headline, and the setting the circles to that position with gsap.set. There are tradeoffs to this implementation. I can't transition them along the path to this position, for one. I just tried your solution (which of course seems like the right way to do it), on a old version of my codebase. However the positions were unchanged after applying the ease-function. I did things a bit differently than the tractor demo, maybe that's why I can't get it to work. I positioned the Circle with MotionPath by using the `end` parameter as a progress. The progress was calculated by mapping the headlines position relative to their parent, to a normalized 0-1 value.
  3. Hi I have a wiggly path with circles that should match the Y position of some texts, and the X position of a path. I tried using MotionPath and calculate the "progress", but it won't be accurate as the path is wiggly. Is there some way to attach the circle to the path, but only for X axis? I got the Y axis down, so that's out of scope of this question. I guess another way of doing it is to convert known Y, to a progress on a path. Is that possible?
  4. I forked it and made some adjustments so it, on desktop, feels like how it's on my phone. I love that effect. So meaningful. Credits @chrisgannon Do you know why this velocity calculation is different on the phone?
  5. Hmmm... oddly enough, the effect is not present on my desktop computer, as I guess your on as well, but on my phone it is. Superb effect.
  6. This was it @Carl! Exactly! Thanks a bunch. Thank you for your quick response, and great help. And @chrisgannon, stop making me feel like a complete amateur!
  7. Hi guys, I once stumpled upon an example using GSAP Draggable. It was a vertical slider that, when interacting, filled a flask/bottle with liquid. The slider knob had the slider value, and when you dragged it fast the knob would rotate, depending on velocity. I have searched and searched for this example, as I have thought about it a lot. Can any one find it? Much appreciated.
  8. I might have replied on the wrong thread, but saw multiple instances where people (including me) had difficulties with simply using the plugin in Nuxt. Not because of SSR, as such, but because Nuxt apparently doesn't allow ES6 imports. Just trying to help.
  9. The ZIP now includes src/bonus-files-for-npm-users/umd/CustomEase.js which you can put inside a local folder (/vendor/gsap/CustomEase in my example) and import that inside the component. import CustomEase from "../vendor/gsap/CustomEase"; And now works as intended.
  10. @bjn I can't get this to work. How did you include the util? I'm doing like this: import { TweenLite, TimelineLite, Power3, CSSPlugin } from "gsap"; import { Draggable } from "../vendor/gsap/utils/Draggable"; But I get the error you had about TweenLite still.
  11. Hi guys, Thanks for the replies I ended using Phaser.io as you recommended. What an amazing project. Thank you for your time.
  12. Hi guys, I'm about to make a game with at catapult/rubberband, somewhat like Angry Birds, but only vertical and not horizontal. You need to hit flying objects that "rains" down. I'm in the research phase right now, and I am thinking about using GSAP with it's Physics 2d, instead of going all out physics and using something like Matter.js. Do any of you have experience in using GSAP for games with Physics? I still haven't decided if I want to use DOM notes or Canvas.
  13. Hi guys, I have a timeline that animates between two classes. It works like a charm with the styling I've used so far, but it can't animate `scale3d`... Do you guys know if this is a known bug, or is there a known workaround? EDIT: I used Gulp with an automatic venderprefix, but I tried to add the vendor-prefixes manually and that worked.
  14. For crying out loud! I suck at this Thank you!
  15. Thank you! However, I have an issue where I'm trying to animate multiple elements at once. One works, but the second doesn't. I tried to add the CSS tween to the timeline in a different way, like the Greensock Timeline example with the Space Invader ghosts, but I think I'm doing somehting wrong, or doesn't it work with the cssPlugin? http://codepen.io/Blueblau/pen/VevrdP