Jump to content
Search Community

mrowka3d

Members

  • Posts

    29

  • Joined

  • Last visited

 Content Type 

Posts posted by mrowka3d

    How to autoplay Multiple Timelines

    in GSAP

    Posted

    Pedro,

     

    Well, I have not been able to break it, so whether or not it's an elegant solution, it is a solution. And a fine one at that, it works perfectly.

     

    It was an amazing journey and I learned a ton. A million thank yous for your time.

     

    I'll inspect this further and if I have any questions, I'll reach out.

     

    Thanks again,

    gregg

     

    • Like 1

    How to autoplay Multiple Timelines

    in GSAP

    Posted

    Yes sir, what we have gone through has been so helpful for me as a coder. It's been a great journey. And I hear ya, I'm always rebuilding things when I find later down the path that it didn't take me where i wanted to go.

     

    No shaming needed. It happens to all of us.

    How to autoplay Multiple Timelines

    in GSAP

    Posted

    Hey Pedro,

     

    Well, we're really close. The main thing I failed in trying  to work was to get the other two slides to close when you clicked on one of the dots. Everything seems to work great if you open a slide the immediately close it before opening another one. But since they are all running in the same timeline, I can't quite imagine how to do this.

     

    I also added a new functionality to this. I added an if statement on mouseleave because i'd like the dot to stay still if its slide is open. But there are some discrepancies and it's not working 100% as I'd like it.

     

    But we're really close. Take a look:

    See the Pen xdYjmY?editors=0010 by mrowka3d (@mrowka3d) on CodePen

     

     

    How to autoplay Multiple Timelines

    in GSAP

    Posted

    Good morning @Dipscom,

     

    This one was a bit trickier for me. I'm understanding a bit of it, but there's something that is tripping me up.

    1. how is bez working? It's acting backwards to me. It looks like a variable of a variable. because in the timeline (line 56) I see that it's a variable of dot1_path that is in the place holder of bez (line 11).  But in line 18, you are pointing to bez, but shouldn't that be dot1_path? It seems to me that dot1_path and bez are the same thing, but I don't know how.

     

    Also, in my user interface, I want my dot to keep pulsing on the hover state. So, i thought it would be best to make a separate timeline function. they technically never need to stop pulsing because when the X shows up on click, it's larger then the pulse and you'd never notice the pulsing stop.

     

    I have attached a new pen on what I thought would work. However, when I hover, both timelines (dot1_path_idle & dot1_pulse_idle) stop.

     

    See the Pen qmYbXr?editors=0010 by mrowka3d (@mrowka3d) on CodePen

    Happy Friday :)

    • Like 1

    How to autoplay Multiple Timelines

    in GSAP

    Posted

    @Dipscom,

     

    Hey man, this is really nice of you to go step by step with me. Thanks! I looked at your code and I wasn't even familiar with, or had forgotten a while ago,  about function parameters. When I looked at them at your first codepen, I was admittedly confused as to what they were doing. But I see now that you create a timeline in line 34 by just stating your function and populate the parameters. You are doing this because the rest of the path timelines are exactly the same, right?

     

    I've taken what you've done, and I added the other two dots. Did I do it the proper way/most efficient?

    See the Pen NjYBNa?editors=0010 by mrowka3d (@mrowka3d) on CodePen

     

    Also, I have some observations/questions in the comments. Just to show you my limited understanding :P

    How to autoplay Multiple Timelines

    in GSAP

    Posted

    Hey guys,

     

    FIRST: to @Dipscom , I understand that my code is very redundant, but I had to revert back to my old code so I can understand what's going on first. Once I have my UI working and complete, I'll take a look at understanding what you did to clean it up. Sorry, my coding skills aren't the best.

     

    With that in mind I have a new codepen attached here with my understanding of things. However, my UI isn't running properly and I'm having trouble visualizing what's happening to my timelines. I come from Flash, so I'm really used to having a GUI with my timelines :P

     

    So, here's my new codepen with comments where I'm having trouble. The comments also explain what I'm trying to accomplish.
     

    See the Pen GmQbLQ?editors=0010 by mrowka3d (@mrowka3d) on CodePen

    Please let me know if I'm going down the wrong path for pausing and resuming all these different timelines.

    How to autoplay Multiple Timelines

    in GSAP

    Posted

    1 hour ago, Dipscom said:

    Hello! @mrowka3d!

     

    Forgive my intrusion but I am trying to earn some brownie points in the leaderboard and thus I shall be stealing as many threads as I can from the others :D

     

    In your pen there's a little reference error,  "dot1_path" is not defined. In your updated version you have omitted the pathDataToBezier declarations. Add them back in and your circles will start moving.

     

    Note that you are adding infinite timelines inside other timelines, that will cause problems as noted in other threads:

     

     

    I also noticed that you had some repeating functions. You can consolidate them into just a single one that takes different parameters.

     

    Other comments, the paths for your dots seem to be all the same. You can save yourself a tiny bit of code and use the same but reverse the animation. Or make different paths to justify them.

     

    See the fork of your pen for my take on your issue:

     

    See the Pen pPaKMK?editors=0010 by dipscom (@dipscom) on CodePen

     

     

     

     

    You get extra brownie points here! Thanks for stopping by :)

    • Like 1

    How to autoplay Multiple Timelines

    in GSAP

    Posted

    OK guys, Awesome, thanks!

     

    I now know about the multiple infinite loops about creating the error. Yes, I tried adding everything into one timeline. Thanks guys.

     

    Dipscom, thanks for your code. I'll be scrutinizing it and checking out what you've done. lots of changes there, thanks for the time you put into it. I'll reach out with any questions I may have.

     

    I appreciate your time guys, thanks a ton.

     

    • Like 1

    How to autoplay Multiple Timelines

    in GSAP

    Posted

    Hello Animation Friends,

     

    I simply don't know how to go further with my next task, and I hope I don't have to start all over with the way my timelines are structured.

     

    I'm wondering if it's possible to get this codepen to play like a carousel. You will see I have buttons that open my content on click. But in my initial state, I would like them to take turns opening automatically like a carousel. And once the user starts interacting with this glorified carousel, it would stop auto opening and closing.

     

    I'm brand new to greenSock and can't seem to wrap my head around how to go about doing this. Any ideas? I'm thinking that i may need to make a master timeline that plays everything. Also, where's a good place to learn about nested timelines? I haven't done this before, but I know it's possible.

     

    Thanks guys,

    Gregg

     

    See the Pen GmroOY by mrowka3d (@mrowka3d) on CodePen

    Controling a timeline with an if/else statement

    in GSAP

    Posted

    Hello Animation Friends,

     

    Looking for help if anyone wants the challenge :)

     

    I have a timeline (tl_click) in my codepen that is not pausing the way I'd expect it.

     

    The timeline:

    tl_click.pause() // WORKS: timeline pauses on load
  .addLabel("open") // WORKS: timeline goes here when user clicks on the dot and this plays
  .to("#dot1_center", 1.5, {scale: 4, y: -15, x: -15, repeat: 0, ease: Elastic. easeOut.config( 1, 0.3)}, "open")
  .to("#dot1_close", 1.5, {fill: "#ffffff", repeat: 0, scale: 4, y: -9, x: -9, ease: Elastic. easeOut.config( 1, 0.3)}, "open")
  .call(function(){ dot_state = false })
  .pause() // DOES NOT WORK: timeline seems to pass here and plays on through to the end of the timeline
  .addLabel("close")
  .to("#dot1_center", 1, {scale: 1, y: 0, x: 0, repeat: 0, ease: Power4. easeOut}, "close")
  .to("#dot1_close", 1, {fill: "#4f2582", repeat: 0, scale: 1, y: 0, x: 0, ease: Power4. easeOut}, "close")
  .call(function(){ state = true }); // DOES NOT WORK: as this timeline runs to the end, my state variable does not seem to change back to true.

    The click action:

    function clickAnimation() {
    dot_state = true;
    if (state = true) {
        tl_click.play(), "open";
    } else {
        tl_click.play(), "close";
    }
}

    The connection:

    dot_click.addEventListener('click', clickAnimation);

    I was hoping that when the user clicks on the dot, that it plays its open state then stops at my second pause function. But it plays right on through to the closing animation.

     

    And the if else statement doesn't seem to work, but it does work on other demo's I've seen today.

     

    I'm sure my syntax is just off.

     

    Thank you for any help,

    gregg

     

     

     

    See the Pen oWbQdP?editors=0010 by mrowka3d (@mrowka3d) on CodePen

    How to toggle multiple timelines

    in GSAP

    Posted

    Hi mrowka3d  :)

     

    There aren't two timelines. Carl is just putting the tl3 timeline into a reversed state so the first time you click it will play forward. It's not creating or merging any new timelines. It's like tl3.pause() or tl3.play() or setting the progress of a timeline like tl3.progress(0.5). Those are all just ways to get or set various values for your timelines.

     

    Does that help?

     

    Happy tweening.

    :)

     

    thanks for the explanation @PointC.

     

    It does make a little more sense. does my latest comment ring true? are they the same statements? Given this new information, are you saying that I could control the timeline in multiple locations? I just tried playing around with moving that line 17 to the bottom of @Carl's pen and it seems that my statement is true.

     

    Cool ... right? :)

     

    PS how does one tag a person's name like what you've done to my name?

1
2
Page 1 of 2  
×
×
  • Create New...