Jump to content
Search Community

Fluid movement

vanwoods test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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.

 

 

Link to comment
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.

Link to comment
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!

Link to comment
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
Link to comment
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
Link to comment
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.
×
×
  • Create New...