vanwoods

Fluid movement

Recommended Posts

Hi!

 

Is there a way to make this animation more fluid?

 

  .to(this.star_mc, .8, {delay:0.5, x: -490, y:-170}) 
  .to(this.star_mc, .8, {ease: Sine.easeInOut, x: -400, y:-490})
  .to(this.star_mc, .8, {ease: Sine.easeInOut, x: -105, y:-485})
  .to(this.star_mc, .8, {ease: Sine.easeInOut, x: 20, y:-285})
  .to(this.star_mc, .8, {ease: Sine.easeInOut, x: -320 , y:70})

 

It now goes hard from one point to the other? Or is this only possible when the star_mc follows a bezier path?

 

I'm working in animateCC right now but i'm not sure if this is possible within animate?

 

I'd prefer animate because i'm using the banner ad templates.

 

Thanks in advance.

 

 

Share this post


Link to post
Share on other sites

That's because default ease of GSAP is Power1.easeOut, you can set default ease globally or you can change it on each tween if you like.

 

TweenLite.defaultEase = Linear.easeNone;

 

 

  • Like 4

Share this post


Link to post
Share on other sites

Thanx Sahil, it looks much better now. 

 

TweenLite.defaultEase = Linear.easeNone;

Does this mean there is always an ease in a tween even when not specified?

 

Hope the client likes it better this way. Otherwise i still have to switch probably to follow bezier path option.

Share this post


Link to post
Share on other sites

Ya Power1.easeOut is default ease on every tween. Ya this should be good for you, though if distance is shorter you might want to reduce duration of that tween otherwise bezier is last option. @OSUblake might have some tricks for this.

Share this post


Link to post
Share on other sites

Yes i increased the duration already.

 

  .to(this.star_mc, 2, {delay:0.5, x: -490, y:-170}) 
  .to(this.star_mc, 2, { x: -400, y:-490})
  .to(this.star_mc, 2, {x: -105, y:-485})
  .to(this.star_mc, 1.5, {x: 20, y:-285})
  .to(this.star_mc, 2.5, {x: -320 , y:70})

 

If it is stil not ok then i think i have to make a path with rounded corners of the star. So it can smoothly follow this. But it would be nice to keep this in Animate. 

Quote

@OSUblake might have some tricks for this. 

Is this within animate?

 

Thanks so far!

Share this post


Link to post
Share on other sites

Your question is very similar to this one. They are using SVG, but that is irrelevant. Look at how I'm calculating the duration based on the distance between the points. The individual tweens use a linear ease. I then animate the progress of the timeline using a tween with a Power1.easeOut ease. That ease could be whatever.

 

 

 

 

 

  • Like 5

Share this post


Link to post
Share on other sites

You should be able to almost copy and paste it. I didn't test this, but something like...

 

var star = this.star_mc;

var points = [
  { x: -490, y: -170 },
  { x: -400, y: -490 },
  { x: -105, y: -485 },
  { x: 20, y: -285 },
  { x: -320, y: 70 }
];

var speed = 300; // pixels per second
var prevPoint = points[0];

TweenLite.set(star, {
  x: prevPoint.x,
  y: prevPoint.y
});

var tl = new TimelineMax({ paused: true })

for (var i = 1; i < points.length; i++) {
  
  var point = points[i];
  var duration = getDuration(prevPoint, point, speed);
  
  tl.to(star, duration, { 
    x: point.x, 
    y: point.y, 
    ease: Linear.easeNone
  });
  
  prevPoint = point;
}

TweenMax.to(tl, tl.duration(), {
  delay: 0.5,
  progress: 1,
  ease: Power1.easeOut // whatever ease you want
});

function getDuration(point1, point2, speed) {
  var dx = point2.x - point1.x;
  var dy = point2.y - point1.y;
  return (Math.sqrt(dx * dx + dy * dy) / speed) || 0;
}

 

  • Like 2

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.