Jump to content
Search Community

lilpopcorn

Members

  • Posts

    16

  • Joined

  • Last visited

 Content Type 

Posts posted by lilpopcorn

    Random variable animation with gsap

    in GSAP

    Posted

    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

     

    Random variable animation with gsap

    in GSAP

    Posted

    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 

    Random variable animation with gsap

    in GSAP

    Posted

    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 

    Random variable animation with gsap

    in GSAP

    Posted

    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

     

     

    Random variable animation with gsap

    in GSAP

    Posted

    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

    Random variable animation with gsap

    in GSAP

    Posted

    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 

×
×
  • Create New...