Jump to content
Search Community

looeee

Members
  • Posts

    7
  • Joined

  • Last visited

looeee's Achievements

2

Reputation

  1. That's exactly what I meant! Thanks for the fast reply!
  2. Ah, I put the ease inside the bezier definition! Haha, I spent 30 minutes trying to fix this without noticing! Thanks, that fixed it.
  3. Is it possible to drag so that the object's position is constrained by a tween? In effect this would something like changing the type from "x,y" to "mytween.progress()" - this is currently not possible, but is there a simple way to get a similar effect? My thoughts so far are getting the tween's target position in the onDrag function and explicitly setting the object's css top and left attributes there ( if I get this working I'll post a Codepen ), but I have a feeling this would be quite inefficient.
  4. Thanks! Although actually it's simpler than that, the points are stored in different arrays and it just switches between the arrays based on the selected curve type.
  5. When I'm animating along a bezier curve, the object being animated slows down towards the end of the curve - you can see this very clearly in the attached Codepen which draws a series of dot along the curve to visualize it. The dots are more tightly clustered towards the end of the curve. Is there any way of changing this? I've tried changing the timeResolution but it doesn't fix this.
  6. OK, I have changed it so that the object and the control points are draggable! Unfortunately handles won't work here as the curves are auto-generated based on just the points.
  7. GSAP Bezier Curve ViewerI've been working with bezier plugin quite a bit recently and made a tool to help visualize the curves as creating them blind is no fun! At its heart it's just this function, which should work to visualize any tween (uses jQuery): let visualizeTweenMaxBezier = (tween, steps) => { for (let i = 0; i < steps; i++){ tween.progress(i/steps); $("body").append("<div id='point" + i + "'></div>"); $("#point"+i).css({ position: "absolute", width: "2px", height: "2px", "background-color": "#7F7F7F", top: tween.target.css("top"), left: tween.target.css("left"), }); } tween.restart(); } Currently it generates code based on screen pixel values, if people are finding it useful though I might update it to generate code based on screen percentage, or percentage positions within the containing element. Happy coding!
×
×
  • Create New...