Random variable animation with gsap

[lilpopcorn 4 Likes (Newbie)]

how to animate PArray  or select random <p> each time when we mouse over section

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

[Cassie 5,372 Likes (Superhero)]

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

[PointC 14,420 Likes (Superhero)]

There is also a super handy helper function to randomly pull from an array until it's empty.

 

https://greensock.com/docs/v3/HelperFunctions/#random-array

 

Happy tweening.

[lilpopcorn 4 Likes (Newbie)]

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

[lilpopcorn 4 Likes (Newbie)]

23 hours ago, PointC said:

There is also a super handy helper function to randomly pull from an array until it's empty.

 

https://greensock.com/docs/v3/HelperFunctions/#random-array

 

Happy tweening.

i should try this later

[lilpopcorn 4 Likes (Newbie)]

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

[PointC 14,420 Likes (Superhero)]

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.

[GreenSock 18,569 Likes (Superhero)]

@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

[lilpopcorn 4 Likes (Newbie)]

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 

[lilpopcorn 4 Likes (Newbie)]

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

[lilpopcorn 4 Likes (Newbie)]

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

 

 

[lilpopcorn 4 Likes (Newbie)]

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


 

[PointC 14,420 Likes (Superhero)]

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

[lilpopcorn 4 Likes (Newbie)]

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

[lilpopcorn 4 Likes (Newbie)]

now i added overwrite:true 

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

[lilpopcorn 4 Likes (Newbie)]

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 

[PointC 14,420 Likes (Superhero)]

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.

[lilpopcorn 4 Likes (Newbie)]

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

[iDad5 213 Likes (Specialist)]

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  

[lilpopcorn 4 Likes (Newbie)]

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 

[PointC 14,420 Likes (Superhero)]

I'd probably do something like this:

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

 

Happy tweening

[iDad5 213 Likes (Specialist)]

@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

[lilpopcorn 4 Likes (Newbie)]

thank you so much @PointC and @iDad5 i really appreciate you guys for helping me to understand this 

[lilpopcorn 4 Likes (Newbie)]

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

 

[lilpopcorn 4 Likes (Newbie)]

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

i chose @PointC code and created this final version and now its so perfect and has no any problem