Jump to content
Search Community

Partial Motion Along a Curve

andresfcamacho test
Moderator Tag

Go to solution Solved by Carl,

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,

 

I'm trying to animate an object around a curve, but I don't want the entire motion to be completed. For instance, if I was moving around a clock, I don't want to go from 12 o'clock to 12 o'clock, but instead 12 o'clock to 3 o'clock. Does any one know if this is possible? I've attached a Codepen that I've been working from. I'm also using the MorphSVGPlugin to animate my SVG object around a path defined by another SVG.

 

Thanks

See the Pen VerMWX by anon (@anon) on CodePen

Link to comment
Share on other sites

  • Solution

Thanks for the demo. Great question.

 

You can tween the progress() of your tween like so:

var t = TweenMax.to("#circle", 5, {bezier:{values:path, type:"cubic"}, ease:Linear.easeNone, repeat:-1, paused:true});

//bounce to the middle of the animation
TweenMax.to(t, 2.5, {progress:0.5, ease:Bounce.easeOut, repeat:5, repeatDelay:0.5});

http://codepen.io/GreenSock/pen/LxQzNE?editors=0010

 

Read more about this: https://medium.com/net-magazine/7-hidden-gems-of-the-greensock-animation-platform-4fb71389f6ca#.zhyasdplf

 

Or you can put your tween in a timeline with some labels and navigate to any label on the fly by using TimelineMax.tweenTo()

//add some labels to the timelinevar animation = new TimelineMax();
animation.add("start")
animation.to("#circle", 2, {bezier:{values:path, type:"cubic"}, ease:Linear.easeNone});
animation.add("end")
animation.add("middle", animation.duration()/2);


//when each button is clicked tweenTo() a label based on id of button
$("button").click(function(){
  console.log($(this).attr("id"));
  animation.tweenTo($(this).attr("id"));
})

 

 

You can also build a sequence of animations through different segments of the curve by tapping into TimelineMax.tweenTo()

 

//build a sequence of tweenTo() animations
var controller = new TimelineMax();
controller.add(animation.tweenTo(1))
         .add(animation.tweenTo(2.5, {ease:Power2.easeOut}), "+=0.5")
         .add(animation.tweenTo(5), "+=0.5")

http://codepen.io/GreenSock/pen/MJQEjP?editors=0010

 

Also check out TimelineMax.tweenFromTo() in the docs which will allow you to tween from and to any time or label in a timeline.

 

 

 

 

  • 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...