Can't seem to get the dot positioning right

[ThePixelPixie]

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

See the Pen mdoPPJB by ThePixelPixie (@ThePixelPixie) on CodePen

[ThePixelPixie]

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

[ThePixelPixie]

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.

[GreenSock]

That's a cool effect, @ThePixelPixie. 

 

It's a LOT to ask for people to slog through 1,000+ lines of JS/CSS/HTML to try to solve your punch list 🙂

 

That's beyond the scope of help we can typically provide in these free forums, but here are some options for you:

1. Significantly reduce your demo down to just the essentials to show one issue. Post back here with that minimal demo and focus on only that one piece at a time.
2. Post in the Jobs & Freelance forum to see if you can hire someone to help.
3. Contact us about our paid consulting services. 
4. Maybe someone else is willing to invest the time and offer some suggestions. You could wait to see if a generous soul comes along 🙂🙏

Good luck! 

[ThePixelPixie]

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?

[GreenSock]

Nah, that doesn't really help that much. It's still a lot of logic to work through and a lot of factors to consider in context. Perhaps someone else has the time to devote to that. Unfortunately I don't. Good luck, though! 

[Cassie]

Yeah, unfortunately my route to fix something like this would be to work through all the code until I understand it, then isolate out each animation, get it working individually and then once I'm sure the pieces work individually, carefully integrate it all together again. That's a time consuming process, we're good at pinning down GSAP related issues but this is definitely in the tangly logic arena, and that takes time.

It's strange to me that the arrows are affecting the dots differently than if you click on them directly. That's a big red flag for me. They should behave the same, so the arrows or the dots should just be different 'events' that lead to exactly the same code being run. I reckon if you untangle this and rewrite it to run exactly the same function at those points you may solve a key issue.

Good luck!
 

 

 

[ThePixelPixie]

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!

[ThePixelPixie]

@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!

[PointC]

Cool effect.

 

Just FYI - clicking the arrows quickly results in some of the base numbers jumping to a strange position. Here's a quick GIF showing the base for #2 flying off to the right by your panel indicator. 

[ThePixelPixie]

@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.

[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}