mrowka3d

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

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.

Damn real life and work You have spent so much time with me, and I am entirely grateful. Get back to it only when you can. We are so close I feel.

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:

PS I did not like how the white X disappeared from "clearProps:"fill"" So, I tried to animate the opacity on the X and set its opcaity in the CSS to 0. It looks to work fine, was this the best way to go about it?

Hey Pedro, OK, I've studied this morning and all looks to make sense to me. It is now getting real complicated, but if I'm following fine, I'm hoping that this codepen would be the most efficient way to add the other dots: And that was really easy. But was it the right way?

Hello my friend, Just wanted to let you know that I've been busy this weekend and won't be able to respond until tomorrow I feel like I miss our conversations. Have a good weekend.

OK, wow. We have gone down a rabbit hole that is pretty advanced for me. I see everything you're doing, and it's making sense, but this is advanced stuff I'm not familiar with. But hey, I added two lines of code here to get the other two dots to move. Wow, that was easy. Sorry for the Food Poisoning Yuck!

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. Happy Friday

@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? Also, I have some observations/questions in the comments. Just to show you my limited understanding

@Dipscom, Oh hey, thanks so much for your time. No rush at all, please take your time. I'm a bit worried to think that my understanding is so backwards. But am very grateful for any direction you can show me to correct it.

Nice Post, Craig! It totally makes me feel better because I'm just starting to transition away from the "Wait a minute. This is ridiculous." phase. I'm not a strong coder, I'm used to Adobe's Edge Animate, AFX, Maya, Flash. Anything with a GUI. This straight coding thing is a bit scary. But I hope to be where you are in 12 months.

Also, for reference, this version has all the working UX that I'd like to bring back into the new code: http://codepen.io/mrowka3d/full/BRrZoR?editors=0110

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 So, here's my new codepen with comments where I'm having trouble. The comments also explain what I'm trying to accomplish. Please let me know if I'm going down the wrong path for pausing and resuming all these different timelines.

You get extra brownie points here! Thanks for stopping by

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.

UPDATE: I just added an label to my master timeline and that did help get everything to play all at once, but why doesn't my master play all my items in sync? It looks to me that my master timeline is stuck.

Hi PointC, I tried importing my timelines into functions and play them in a master timeline, however I'm missing something here because the dots are not animating: Please let me know what I missed. Thanks!

This is great Craig, thanks for your direction. I think I can work with this. Let me play around with it and see if I have anymore questions. Thanks, gregg

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

Thank you so much for your help Carl! I had a few other syntax errors in my last codepen that was breaking everything. But with those fixed... check out my amazing floating pulsing open/close button: http://codepen.io/mrowka3d/full/oWbQdP Woop Woop!

Thank you Carl for syntax help!

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

Sweet! Thanks PointC and Carl. Much appreciated. Also, Given that the solution that Carl made didn't look good (with that easing reversed) I'm now on a different solution all together. So, I'm going to create a new post for that.

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?