ThePixelPixie

Annnnnd I discovered that the button hover effect seems to become unstable after cycling forward through the slides once, and then trying to navigate backwards 🤦‍♀️ Every time I think I've got it all straightened out...{sigh}

Hi there, Sure. The error is with line 134 in this code, but on my staging site (I don't get any console errors with it in CodePen though, which is why I've assumed it's something to do with my non-CodePen version). https://codepen.io/ThePixelPixie/pen/mdoPPJB

@PointC - argh...I have no idea why that might be happening. I never would have tried clicking them so fast. I'm not even sure how to address it...thanks for the heads-up.

nevermind. My membership had expired and I didn't realize it. So sorry.

Ok, so I didn't have this error in my CodePen, so I'm guessing it has to do with how I'm calling the script on my staging site? I *think* I have a paid membership? I'm able to generate a token in my account page, but I don't know how to use it. The error I'm getting on my staging site is this: "Invalid property easeParams set to Array [1.1, 0.5] Missing plugin? gsap.registerPlugin()" When I saw that I thought maybe the easing I'm using isn't part of gsap.min (though it's just "elastic.out" for the animation with those parameters, so I *thought* that was part of gsap.min?), so I added EasePack and CustomEase to my scripts. But I'm still getting the error. Did my membership lapse? Surely I'm missing something super obvious here...

@Cassie - your suggestion to isolate out the different elements actually helped me to be able to rework the code from scratch. It now all works well. So, even though y'all weren't able to *directly* help me out, you still did help The CodePen link above should now be a full-working example. Thank you again!

Much appreciated, both of you. I do understand that it's a lot of code to go through. I'll see if I can figure out why the behavior with the arrows is different than with clicking the dots themselves. Thank you!

I guess I'm just not sure how to reduce the example to only the part causing an issue, since it's all supposed to work together. Y'know? I kind of thought folks would be able to see the whole, find the parts that affect this animation, and see the problem better than I can. I'm fairly sure the problems lies in the initDots, updateDots(), animateDots, function updatePos(), and the function updateDotPositions() parts of the code. Does that help at all for slogging through lines?

Interesting #2: I only get my zoom-in effect with slides 1, 2 and 6. Something's interfering with it for the other slides, and I'm not sure what.

Interesting...I just noticed that the .dots-current div doesn't bounce off to the right when using the arrows. Only when clicking on the dots themselves...

Hi, I've been having fun customizing a couple of different scripts I've found. The carousel itself is inspired by this. And the nav dots are adapted (to the best of my limited ability) from this. I think I'm getting really close with it, but the .dots-current keeps bouncing all the way to the right before going back and *almost* landing on top of the current dot. I've also just got a tired brain and haven't figured out how to make my nav arrows also trigger the dots animation at the right time. Any help that can be afforded would be massively appreciated. Edit: And I just realized that somewhere along the way this evening, I've lost the cool hover effect over the "link here" button that's in the original tympanus example. {sigh} I have no idea where I lost it. For some reason in init() I had changed gsap to .to, instead of .set. When I changed it back, my hover effect returned

My ultimate goal is to have the morphing reveal navigation, but I want the #menu path to fill the viewport 90vw and 90vh. Right now it's very jumpy, and is only covering 90vh. I can't have the original svg covering the viewport entirely either, because there will be page content that needs to be interacted with when the nav isn't revealed. Also, for some reason, reclicking only works if I click at the verrrrry bottom tip of the #menu path. Maybe I'm going about this the wrong way? Guidance would be much appreciated.

Hi there, (Note: I didn't realize my links to other CodePens would embed them. The one I'm working on is at the bottom.) I'm trying to learn how this page was done and will eventually change the line drawing on my CodePen to one of my own. But I'm using this for figuring it out first. I'm also using this CodePen for the starting point of my script. https://codepen.io/mikeK/pen/XWdwdeR 1. I've got the line drawing, so that's good. but... 2. There's supposed to be a red dot at the end of the black line. And I'm not sure why it's not showing up. 3. Based on the page I'm using to figure this out, that black line should only be a certain length as it goes down the page, and leave the rest with the gray path behind it. 4. That black path also should only be starting out very short at the very top before scrolling begins. Right now it seems to already have written a good portion of the first section. 5. Somehow the paths for the images on the way down should kind of stop the screen from moving down anymore until that vertical stretch of the area has been drawn (example, the numbers at the beginning). 6. I have the background images appearing as they scroll down (thanks to a few lines from the following CodePen), but the timing seems inconsistent https://codepen.io/mikeK/pen/ZEybOJY/14f1a789a064937cd32c044cd8fb4b4c 7. I can't seem to get the animation to actually start before they hit the top of the page. I'm pretty sure this has to do with the scrolltrigger start settings, but I'm not sure how I should be adjusting those. 8. It also looks like the dot in the sample page changes size as it goes through various drawing stages. Thanks in advance. I'd very much like to understand how this was done so that I can adapt it to something else.

Ok. Let's see if I'm getting anywhere. I've built all the different elements here: https://codepen.io/ThePixelPixie/pen/LYdwaad But I'm not sure how to control individual elements within the parts with each next/prev click. Like, on the first "next" click, I want the first "part" to stay, but the next part elements (.second & .third, respectively), to slide in from the top (.second) and the bottom (.third). Then on the third click, fade .first out and fade in .fourth behind .second & .third, etc. This probably all looks like complete gibberish. I'm so sorry.

@Cassie Thank you! That's actually pretty helpful. Sometimes, with my ADD, I just need to have those first steps outlined for me so I can actually *start*. LOL