Jump to content
Search Community

onStart Firing "Early"

Noa 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

With a lot of help from the folks in this topic, I've been working on changing a class on the #tile element as it moves along a path so the tile's color corresponds to the direction it's traveling. I'm using the onStart parameter of TweenMax.to(), but the issue is that starting a new tween before the last is complete seems to immediately trigger the onStart function even though the tile hasn't arrived at the right position, resulting in the class being added before the tile is on a given segment/direction. Is this because calling the main function is restarting the timeline, and is there a way to delay the calling of a function until the tile has reached a certain segment? Clicking 'next' a few times quickly in the codepen causes the classes to change before the tile has arrived on the relevant segment.

 

EDIT It looks like the answer might be in onStartParams, but I'm not quite sure what I'd specify there to achieve the desired behavior.

See the Pen MqLvGp?editors=0010 by anon (@anon) on CodePen

Edited by Noa
Add more information
Link to comment
Share on other sites

This might be a bit tricky. Just so we understand the desired result here.

 

You want the tile to change color as it starts traveling each new segment and that new color is based on the direction of travel? The user is allowed to click multiple times to rapidly advance through each segment? I would also assume you want an immediate color change if the user clicks in the middle of a section to reverse the direction of travel?

 

I'm not sure the progress() method is gonna be best here. It might be better to tween to the polyline points and call a function to check the direction of travel and whether it's a north/south or east/west segment. 

 

Blake may jump in with something amazing, but I'd have to think about this one a bit. 

  • Like 5
Link to comment
Share on other sites

PointC,

 

You've actually described it much better than I did! By "tweening to the polyline points" do you mean splitting each segment up into its own timeline? Currently my "direction checking" basically looks like finding the destination point and determining whether I'm traveling forward to that point or backward to that point. Are you thinking it would be smarter for me to check the direction on clicking the next/previous buttons?

Link to comment
Share on other sites

Yeah, I don't think the progress() method we were doing on this in the other thread is the best approach with all the direction/color changes. Though it might work with some calls to change the color at different progress points. I think tweening on click to the next/prev polyline point is probably the way to go here. Sensing the direction and changing the color at each point is pretty easy. The tricky part will be reversing in the middle of a multi-segment timeline. 

 

What I mean by that is suppose you're on jumpPoint 0 and you rapidly click 6 times to tween to the end. It's no problem to build the timeline with those clicks, but if the tile is say - only part way between points 1 & 2 - and then you click previous to reverse it, you'd need to figure out how to handle that. At that point, the jumpPoint variable has a value of 6 and the timeline is built. Clicking previous once will give you a jumpPoint value of 5 In that scenario. You can clear() the timeline and start building it again in the other direction, but you'd also need to know that the closest reverse point is actually 1 and not 5. See what I mean?

 

I'm just kinda thinking out loud here as I haven't had much time to experiment with this or the progress() method, but I think it's doable. You just have to logically keep track of several things. You'd need to know the clicked jumpPoint to build the timeline, the actual position of the tile (closest jumpPoint), the direction of the tile and the fill color. I may have some time to tinker over the weekend. 

 

Happy tweening.

:)

 

  • Like 1
Link to comment
Share on other sites

If you don't want to support rapid clicks then you can add logic to ignore clicks when your tween that controls timeline is active.

 

See the Pen aaxzJp?editors=0010 by Sahil89 (@Sahil89) on CodePen

 

If you want to support rapid clicks then you will have to calculate angle using onUpdate. Following is the example show how you can calculate the angle, check the console. Now you can use that to determine angle based on range you want. Also, adding classes might not be best idea, instead you can do that directly from javascript.

 

See the Pen aaxzJp?editors=0010 by Sahil89 (@Sahil89) on CodePen

 

You can simplify your math to determine range by using a rectangular map and skewing your svg. Though if you plan to add text to it then you won't be able able to use this trick. You might be able to use it by adding reverse skew on text.

 

See the Pen xaebrq?editors=0010 by Sahil89 (@Sahil89) on CodePen

 

  • Like 4
Link to comment
Share on other sites

okay, I managed to kinda sorta make this work with the progress() method. The only thing that came to mind for the color changes was recreating the timeline when the direction is changed. This changes the tile color to work differently on each segment depending on which way it's going. I've prevented reverse clicks in the middle of segments. That's still the tricky part. If you had a color for forward and a color for backward, it would be pretty simple, but the whole North/South/East/West color change makes this a little tougher. 

 

My brain only functions at 40% power on the weekend, so here's what I have for you to tinker with.

 

See the Pen zJXqNR by PointC (@PointC) on CodePen

 

This whole thing may be better with tweening to the polyline points as I mentioned before, but I don't have much free time to experiment right now. Hopefully this gets you started and/or gives you some ideas.

 

Happy tweening.

:)

 

  • Like 2
Link to comment
Share on other sites

I'm not sure why I didn't think of this yesterday, but changing direction in the middle of a segment is quite easy with the progress method. When the timeline is rebuilt, we set a variable equal to the progress of the existing timeline so we can use it to set the progress of the new timeline going the other direction. The trick is quickly setting progress(1) on the new timeline before setting the temp progress if the new timeline is going backward. That way we can get all the calls to fire. Here's a revised version that will allow you to reverse in the middle of a segment. 

 

See the Pen wEZJqN by PointC (@PointC) on CodePen

Hopefully that helps. Happy tweening.

:)

 

 

  • Like 2
Link to comment
Share on other sites

Hi Craig,

 

Thanks so much for all your help on this. I've been tweaking the code to move closer to my goal of animating a bus along a route, and I've been adapting your code to achieve this. Moving forward, all is well, but once I begin backward movement, things get a little out of whack (the bus skips around the route, sometimes jumping between the end and a later segment). Any idea what might be causing the behavior? 

 

I've also tried to add some "stops" along the route, which is where I'd ultimately like to get the bus to stop rather than at corners - any idea how I could get the bus to skip corners?

 

See the Pen zJXXpB?editors=0010 by anon (@anon) on CodePen

 

Link to comment
Share on other sites

I see where you're going with this. I thought it must be some sort of route animation you were making. Looks cool.

 

The current problem is you have 15 progress stops, but only 14 points in the forward array and only 13 points in the backward array. So, when you go to reverse and the progress(1) fires, it's looking for data that isn't there. That's why the backward animation gets funky. You need those two arrays to be the same length as the progress stops array.

 

To make the bus skip the corners, I'd probably create the progress stops in the middle of each segment. In the loop that creates them, we measure the length of the segment to determine the corner. All you'd need to do is take half that length to add a progress stop right in the middle of all the segments. If you do that, you'll probably want to manually add a stop at progress(0) and progress(1) so the beginning and end of the route don't stop short. 

 

Hopefully that makes sense. Happy tweening.

:)

 

Link to comment
Share on other sites

On second thought, I think you'll need the corners in there as progress points so the bus turns correctly. 

 

You could add points on the polyline/polygon where you want the stops for the bus. Then you'll end up with those stops plus the corners which is more jumpPoints than you want. You could then create an array of the actual jumpPoints where you'd like the bus to stop. The prev/next buttons would then increment/decrement through that array of bus stops rather than each stop in the progressStops array. Make sense? 

 

Happy tweening.

:)

 

  • Like 1
Link to comment
Share on other sites

On 9/22/2018 at 5:18 AM, Sahil said:

You can simplify your math to determine range by using a rectangular map and skewing your svg.

 

Interesting approach, but it's pretty easy to do an isometric projection. It's even easier to do a diametric projection. You draw stuff at 26.565 degrees instead of 30 degrees.

 

Why would you use a weird angle like that? Simplicity. Don't think in angles. It's a 2:1 ratio. If a tile is 100 wide, then its height would be 50. That's how isometric computer graphics are usually drawn.

https://en.wikipedia.org/wiki/Isometric_computer_graphics

 

You define positions as row and column values in a grid. Getting the projected coordinates is done like so, where x would be the column, and y would be the row.

 

var xCoord = (x - y) * tileWidth / 2;
var yCoord = (x + y) * tileHeight / 2;

 

 

See the Pen KxLMRR by osublake (@osublake) on CodePen

 

 

  • Like 5
  • Thanks 1
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...