Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

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. 

See the Pen dpqyzO?editors=1010 by swampthang (@swampthang) on CodePen

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



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

See the Pen gwdrBZ?editors=0010 by osublake (@osublake) on CodePen


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
Link to comment
Share on other sites

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

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

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

See the Pen JRabvV?editors=1010 by swampthang (@swampthang) on CodePen


What am I missing?


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

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

See the Pen 6d069619ec04912856b2862ff5f47685 by osublake (@osublake) on CodePen


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. 

See the Pen JRabvV?editors=1010) by swampthang (@swampthang) on CodePen

var tl = new TimelineMax({ paused: true })
  .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 })

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

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.