Jump to content
GreenSock

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

Paused timeline and data storage

Recommended Posts

I wonder how I can accomplish desired result, with a paused timeline?

 

When you see the codepen with initial state running, and watch the console, you'll see I saved a timestamp for each tween in the timeline. I want to re-use these values whenever I reverse the timeline. It works as you can see when timeline is running by default, but not when the initial state is paused.
 

If you uncomment paused: trueyou'll see what I mean.

I've tried different settings with immediateRender etc, but no luck :( 

See the Pen 2526defa1c3c2add4113113ce4477b9a by joseelsantos (@joseelsantos) on CodePen

Share this post


Link to post
Share on other sites

Oh, I must have done something wrong, now I get it to work with immediateRender: true. Sorry for bloating the forums, wish I could delete my posts.

 

But if someone is looking at this anyhow, is there a better way to store data in the timeline than this way?

Share this post


Link to post
Share on other sites
1 hour ago, Torrfura said:

I must have done something wrong, now I get it to work with immediateRender: true. Sorry for bloating the forums, wish I could delete my posts.

I'm glad you figured it out! Don't worry about "bloat" - people find old threads to be helpful if people come across them. 

 

1 hour ago, Torrfura said:

is there a better way to store data in the timeline than this way?

What do you mean a better way to store data? What's the end goal?

 

A small side note not related to GSAP, in your getData function you have two separate calls to new Date(). Technically there is a tiny fraction of time in which the minute and second could be different than what they would be if you used one call. In practice in a function like this that duration is probably negligible but it's probably best practice to make one call to new Date() instead:

 

function getData() {
  let date = new Date();
  return `${date.getMinutes()}:${date.getSeconds()}`;
}

 

Share this post


Link to post
Share on other sites

Ok, I've been working on a (for me) very complicated timeline for over a month now. I'm getting close to giving up :( 

I'm doing an "correction" experience. I have a set of result numbers with it's own timeline, and when each number timeline has finished, I need to sort another set of divs (rows). If any of these rows have the same number in it, it get a new order depending on how many correct numbers you have. 


My approach has been to:
1. Create a master timeline
2. Loop through all result numbers and add their timeline, to the master. Then in the end of the same loop ->
2.1. Create a sorting timeline, loop through all rows and set its 'order = x' (based on amount of matches in each row), and then create a FLIP (Paul Irish) animation (timeline) and add to master timeline. 

I need this to be responsive, working if the rows are divided in columns (hence using flexbox order).

Kind of, this is maybe iteration 25 of different approaches I've been taking on. None has worked yet...

Share this post


Link to post
Share on other sites

A diagram (or even better, a demo!) would be helpful in getting us to understand exactly what you're trying to do.

 

13 minutes ago, Torrfura said:

I'm getting close to giving up :(

Don't give up! At least make a minimal demo so we can try to help you out.

  • Like 2

Share this post


Link to post
Share on other sites

Ok, I've tried to really simplify my animation / timeline as much as possible. It looks stupid, but I think my end goal will be somewhat understandable.

I've left almost all logic out for this example, just to not bloat your vision / ideas. Quick sum of what I want:

  1. Run number timeline
  2. At the end of the number timeline, count amount of corresponding numbers in each row, and store that value in the timeline so that I can reverse / skip the animation at any time, still keeping track of the current amount of correct numbers in the sequence.
  3. Animate total correct number div in each row, (not essential at this point / example), each time it's changed.
  4. Create a timeline at the end of each number loop, that will animate and sort all rows using flexbox order as definition to get coordinates, FLIP technique.

I've put down so many, many hours in trying all possible angles, as you've seen in a few posts from me recently.
If anyone can help me figure this out, I'll be forever grateful. And be able to sleep at nights ;)

See the Pen 2043b9499c17331364182832cd238fc2?editors=1111 by joseelsantos (@joseelsantos) on CodePen

Share this post


Link to post
Share on other sites

Thanks for the demo. However, I'm still having a hard time understanding what you're saying.

6 hours ago, Torrfura said:

Run number timeline

What number timeline? Animating the red boxes at the top? Or something else?

 

6 hours ago, Torrfura said:

count amount of corresponding numbers in each row

What corresponding numbers in each row? Do you mean like how many times 1 is found in the list of numbers inside the green boxes?

 

6 hours ago, Torrfura said:

Animate total correct number div in each row

Animate it where? For each box or the total number of people who got that correct number?

 

6 hours ago, Torrfura said:

Create a timeline at the end of each number loop, that will animate and sort all rows using flexbox order as definition

Sort according to what?

Share this post


Link to post
Share on other sites
Quote

What number timeline? Animating the red boxes at the top? Or something else?

Yes, that's a extremely simplified animation, just to get the timeline.
 

Quote

What corresponding numbers in each row? Do you mean like how many times 1 is found in the list of numbers inside the green boxes? / Animate it where? For each box or the total number of people who got that correct number?

Exactly! And store that change in timeline, so if I reverse timeline, the '0 correct', label get the right count. I did not do any timeline for this in the example, as I don't really know how to pass whatever number count it is at that moment. One of my big issues.
 

Quote

Sort according to what?

Sort these rows accordingly to how many correct numbers i have in each row. So if one row, has matched 2 of the red boxes (whenever that timeline has completed), it get's "2 correct" and get's sorted as row 1, if none of the other rows has more correct numbers ofcourse..

Share this post


Link to post
Share on other sites

So the steps you want are:

  1. Animate the first red box at the top.
  2. Go through the list of green boxes - if any of the numbers in each one's list match the number in the red box, count that as correct for that box and increase the total correct number for that box.
  3. After each box has been checked and the correct number increased, sort the green boxes by the number correct with most correct being at the top.
  4. Repeat the above steps for all of the red numbers.
  5. Allow the whole thing to be reversed, etc. including the number correct.

Is this true? Or am I misunderstanding something? I want to be sure I'm understanding your goal before recommending anything :) 

Share this post


Link to post
Share on other sites

That's perfectly on point! I feel I need to underline the importance of having the timeline "record" all states, so I can pause / rewind / timescale even the sorting operation. 

Where I've fallen short is, as I said at the beginning, is "recording" the count of each iteration (red box and down) and figure out when / how I can add style='order: X;' on each row (greenline) and then retrieve coordinates and animate, and also keep track of this when jumping in the timeline...

Share this post


Link to post
Share on other sites

Why do you need to be able to reverse the whole animation?

Share this post


Link to post
Share on other sites

Here I show how you can call functions at the appropriate time using a timeline. I also implemented a crude way of updating the count if it matches the one being checked. I did not implement a sorting algorithm or animation to move the rows visually - you can do that.

 

See the Pen cbc85250839ebca259ec49852fb03ae1?editors=0010 by GreenSock (@GreenSock) on CodePen

 

You'll have to add some conditional logic to check if the timeline is being reversed or not because the order of what to change/animate is different going in the reverse direction. 

 

I also recommend improving your data structures because currently it's hard to access data. I highly recommend having all of your rows and data completely in JS in a data structure and just updating the visual state when necessary. It will make your job a lot easier to do so.

  • Like 1

Share this post


Link to post
Share on other sites
11 hours ago, ZachSaucier said:

Why do you need to be able to reverse the whole animation?

Probably because i'm in tunnel-vision mode when I'm trying to solve stuff like these :) I want it to work 100% as intended. I could easily do a classic callback-solution, but I really love the control you have when using gsap timelines. 

I'm doing this with 100% es6 in the real solution, just wrote that example for you so I could explain my problem.

Can i e-mail you somehow? I just want to show you what I am after. I have a mockup / demo where the timeline does not work as I want, but the animation is (solved using events / callbacks) almost completed. I cannot post a video here though :(

Share this post


Link to post
Share on other sites
6 hours ago, Torrfura said:

Can i e-mail you somehow?

Sure, zach@greensock.com.

 

I can't promise that I'll be able to invest too much more time though unless you have specific questions :) 

Share this post


Link to post
Share on other sites

Nah, I think I'm done. I've accepted that my end goal may be a mix of dreams and feature freaks, and just want to show you where I was going with this solution. I am really grateful for your time and efforts in helping me.

 

Big thanks to you, and this community!

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×