swampthang

Detect first and last repeat and add ease

Recommended Posts

The codepen is a simple version of a timescale tween either speeding up or slowing down. It uses directonalRotation. I'd love to be able to detect the first and last repeat and add easing specifically to those 2 tweens. I thought about creating 2 separate tweens to be the first and last and then sandwich a repeating one inbetween those but wondered if there was a way to automate that.

 

For the ball rotation, it would be cool to be able to apply a Back.easeIn to the first one and a Back.easeOut to the last one. 

Share this post


Link to post
Share on other sites

What you want could be done using the ThrowPropsPlugin. I don't think a lot of people realize that you can create throw tweens without using Draggable. I just made a post about creating throw tweens.

http://greensock.com/forums/topic/15217-animating-a-draggable/?p=66159

 

Those demos are animating x and y properties, but rotation works the same. So here's a simple demo of your ball.

http://codepen.io/osublake/pen/gwdrBZ?editors=0010

 

BTW, you don't need to use the DirectionalRotationPlugin like that if you're loading TweenMax. This will work the same...

tl.to("#ball", 0.1, { rotation: "315_ccw", repeat: 1, yoyo: true })
  .to("#ball", 0.8, { rotation: "360_cw", repeat: 15 })
  .to("#ball", 0.1, { rotation: "45_cw", repeat: 1, yoyo: true })

.

  • Like 5

Share this post


Link to post
Share on other sites

Awesome, Blake! That gives me a couple of really nice options. Thanks.

Share this post


Link to post
Share on other sites

Hey, Blake, what's the best way to reverse that last pen using ThrowProps? I tried switching velocity and -velocity in the slowTween and the speedTween as well as some other things - like switching the reverse() setting for both. Didn't find anything I could relate to that example in docs.

 

What I need is to be able to offer an option where it starts off moving clockwise slightly (kind of like winding up a spring to 'throw' the rotation) and then spin it counterclockwise until it comes to a stop. Iow, just the opposite of what it currently does.

Share this post


Link to post
Share on other sites

Blake's solution definitely works but am puzzled about something.

 

I needed to make the first of the 2 ThrowProps tweens conditional so broke them apart - that's fine - works well. Also needed to add these to a master timeline and that also works. 

 

What I'm puzzled about is the duration of the timelines. I added a couple of info div's to print the 2 timeline's durations to. I called .duration() and totalDuration(). I get 0 in all 4 instances. When I implement this into my app the animation runs perfectly but my master timeline (in the app) shows a duration of half the 'velocity' setting. So, if the velocity is set to 1000 the total is only 1/2 second. However, the entire animation plays.

 

Here's the codepen http://codepen.io/swampthang/pen/JRabvV?editors=1010

 

What am I missing?

 

UPDATE: Actually, it doesn't seem to ever get above 1 second. 

Share this post


Link to post
Share on other sites

I think I see what's going on. To keep this a little easier to parse through, I'll reference Blake's short and sweet version...

http://codepen.io/osublake/pen/6d069619ec04912856b2862ff5f47685/?editors=0010

 

There are 2 ThrowProps tweens...

var slowTween = ThrowPropsPlugin.to(ball, {
  throwProps: {
    rotation: {
      velocity: velocity,
      end: 360 * repeat
    }
  },
  paused: true
}, maxDuration, minDuration, overshoot);


var speedTween = ThrowPropsPlugin.to(ball, {
  throwProps: {
    rotation: {
      end: 0,
      velocity: -velocity,
      resistance: resistance,
    }
  },
  reversed: true
});

The second one - speedTween - is being directly added to the timeline but the first one - slowTween - is being added in real time using a function call so its duration never registers to the timeline. (In my version, you see the duration values register if you select the Wind Up? checkbox. http://codepen.io/swampthang/pen/JRabvV?editors=1010)

 
var tl = new TimelineMax({ paused: true })
  .add(speedTween)
  .add(() => slowTween.play(0));

Problem I'm having is the slowTween is the main tween for the animation and the other one is optional. I've tried adding them like:

var tl = new TimelineMax({ paused: true })
  .add(speedTween)
  .add(slowTween);
tl.paused(false);

But only the first one plays. What kind of magic is this? ;-)

 

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.