Jump to content
GreenSock

lilpopcorn

Random variable animation with gsap

Go to solution Solved by PointC,

Recommended Posts

Hi @lilpopcorn,

 

We try to keep these forums to GSAP related questions, and this is a little more about your JS logic.

But you'll need to create a random number each time you hover as opposed to once on page load.

 

See the Pen yLzyvYP?editors=0011 by GreenSock (@GreenSock) on CodePen

  • Like 4
Link to comment
Share on other sites

On 12/1/2021 at 6:25 PM, Cassie said:

Hi @lilpopcorn,

 

We try to keep these forums to GSAP related questions, and this is a little more about your JS logic.

But you'll need to create a random number each time you hover as opposed to once on page load.

 

 

 

thank you

Link to comment
Share on other sites

See the Pen mdBJMmG by undertakerio (@undertakerio) on CodePen



here i was trying to do it with gsap timeline play and reverse it 

i dont know is this the correct way to implement it with the timeline because sometime when i do fast mouse in out its skip the selected paragraph and start animating others, its only happen like 1 out of 20 so i thought maybe i should ask you @Cassie

  • Like 1
Link to comment
Share on other sites

The problem you're seeing is when you get the same target two times (or more) in a row. Say you randomly get paragraph 4. Your hover tweens that to xPercent:100. When you mouseleave, that timeline reverses. But you quickly mouseenter again and get paragraph 4 before it has finished reversing. Now you ask it to tween to xPercent:100 which it does, but you may have interrupted the reverse at something like xPercent:30. Now that target will only animate between xPercent:30 and xPercent:100. Make sense?

 

You have some solutions.

  • You could use .fromTo() tweens.
  • You could create separate timelines and play/reverse random ones on hover. 
  • You could check if a timeline .isActive() and force its progress back to 0.
  • You could make sure you don't get the same target two or more times in a row. The helper function above could do that, but even that could backfire because it will go through all the targets and then start over. The last selection of one group could be the first selection of the next group and could still get stuck. It's far less likely than the method you're using now, but possible. 

Hopefully that helps. Happy tweening.

:)

  • Like 1
Link to comment
Share on other sites

@PointC is exactly right. Also, you're creating a new "mouseleave" event handler over and over again on every "mouseenter" event, so they're stacking up. You probably won't notice because they'll just keep calling .reverse() on timelines that are already reversed but it's definitely a memory leak and performance problem that you're creating. 

 

Here's how I'd approach it: 

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

  • Like 3
Link to comment
Share on other sites

1 hour ago, PointC said:

The problem you're seeing is when you get the same target two times (or more) in a row. Say you randomly get paragraph 4. Your hover tweens that to xPercent:100. When you mouseleave, that timeline reverses. But you quickly mouseenter again and get paragraph 4 before it has finished reversing. Now you ask it to tween to xPercent:100 which it does, but you may have interrupted the reverse at something like xPercent:30. Now that target will only animate between xPercent:30 and xPercent:100. Make sense?

 

You have some solutions.

  • You could use .fromTo() tweens.
  • You could create separate timelines and play/reverse random ones on hover. 
  • You could check if a timeline .isActive() and force its progress back to 0.
  • You could make sure you don't get the same target two or more times in a row. The helper function above could do that, but even that could backfire because it will go through all the targets and then start over. The last selection of one group could be the first selection of the next group and could still get stuck. It's far less likely than the method you're using now, but possible. 

Hopefully that helps. Happy tweening.

:)

thank you, i think these are very advance for me so ill start with fromTo because i used it so lets see is this going to help me 

Link to comment
Share on other sites

1 hour ago, GreenSock said:

@PointC is exactly right. Also, you're creating a new "mouseleave" event handler over and over again on every "mouseenter" event, so they're stacking up. You probably won't notice because they'll just keep calling .reverse() on timelines that are already reversed but it's definitely a memory leak and performance problem that you're creating. 

 

Here's how I'd approach it: 

 

 

wow you replied me @GreenSock it's so cool and i like how you created a variable to store the current random paragraph, thats really smart
ill try this too.

ill update you guys later

Link to comment
Share on other sites

2 hours ago, GreenSock said:

@PointC is exactly right. Also, you're creating a new "mouseleave" event handler over and over again on every "mouseenter" event, so they're stacking up. You probably won't notice because they'll just keep calling .reverse() on timelines that are already reversed but it's definitely a memory leak and performance problem that you're creating. 

 

Here's how I'd approach it: 

 

See the Pen mdBJMmG by undertakerio (@undertakerio) on CodePen



i followed your code and i created this

 

 

Link to comment
Share on other sites

See the Pen mdBJMmG by undertakerio (@undertakerio) on CodePen



i want to know how can i reverse the timeline on mouse leave without writing the same timeline. right now creating two timeliness for on enter and leave is not a issue its working fine but when we have a big timeline then i think it is going to be challenging to rewrite the time line again


 

Link to comment
Share on other sites

Is there a reason you don't want to use tweens with overwrite:true like @GreenSock did in his demo?

  • Like 1
Link to comment
Share on other sites

3 minutes ago, PointC said:

Is there a reason you don't want to use tweens with overwrite:true like @GreenSock did in his demo?

oh sorry i forgot to write

Link to comment
Share on other sites

See the Pen mdBJMmG by undertakerio (@undertakerio) on CodePen



i updated my code and i used @GreenSocklet randomParagraph = gsap.utils.random(ParagraphArray, true); variable method combining it with @PointC fromTo method i created this new complex long timeline and im using reverse timeline on mouse leave. its working good but only problem when we mouse enter and random variable pick the same paragraph its start the animation from the start which look buggy, is there any way to resume the current selected random variable paragraph incase they got selected again on mouse enter 

Link to comment
Share on other sites

If you're using a complex timeline, I think I'd create the timelines ahead of time and just play/reverse on hover rather than creating a new timeline on each hover.

Link to comment
Share on other sites

2 hours ago, PointC said:

If you're using a complex timeline, I think I'd create the timelines ahead of time and just play/reverse on hover rather than creating a new timeline on each hover.

i dont understand and how to do it

Link to comment
Share on other sites

I guess what @PointC means is that you loop over you paragraphs at some point (document ready seems a good choice) and create an array of Timelines one for each paragraph. (don't forget to initially pause them)

You can randomly call one of the timelines on mouseover, play, pause and stop it as you like. 

 

Sounds like god advice to me - like always from PointC :-) 

  • Like 1
Link to comment
Share on other sites

12 minutes ago, iDad5 said:

I guess what @PointC means is that you loop over you paragraphs at some point (document ready seems a good choice) and create an array of Timelines one for each paragraph. (don't forget to initially pause them)

You can randomly call one of the timelines on mouseover, play, pause and stop it as you like. 

 

Sounds like god advice to me - like always from PointC :-) 

thank you so much for being here and suggesting me that, but im so new on gsap like its my second month and im still learning and my java script skills are also bad im only good at html css animations and my Java script is really below average. can you please show me how to write the code you suggested 

Link to comment
Share on other sites

@PointC beat me to it and his version is surely superior to mine, I still post mine, as I tried to do it with more basic JavaScript - but you can happily ignore it.

 

See the Pen mdBerEx?editors=1111 by mdrei (@mdrei) on CodePen

  • Like 1
Link to comment
Share on other sites

On 12/4/2021 at 3:33 AM, iDad5 said:

@PointC beat me to it and his version is surely superior to mine, I still post mine, as I tried to do it with more basic JavaScript - but you can happily ignore it.

 

 

 

thank you so much for explaining me whole code in basic and simple language you are amazing, if i can meet you ill buy a ice-cream for you for helping me

 

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