Dine Restaurant - Svelte, Parallax Effect, CSS Animations

@dwhenson Hi, Dave! Thanks for taking the time to look at my solution, and for sharing those resources! 😄

Ack! That flash is what I was talking about with my animation concern and wanting to find a way to preload image srcsets from pictures. It's all because the content for that section is dynamically generated depending on which tab is active, so the content has to load. I did have an animation delay and even a hidden class to help compensate, but I think I might have to rework the section (and here I thought I was being so clever!). 😕

Instead of dynamically generating content, I could put all the tab content in the DOM and toggle some hidden class along with the animations. I would imagine that would solve both the flashing and any accessibility issues. Might have to try out that tab componenent you found! Thanks again for looking into it! Just so happens my next project is a "tabbed" single-page web app, so your resources are well-timed!

Update: All the content is now in the DOM rather than dynamically loaded, so the flashing issue should be fixed. 🤞

@brasspetals I think the approach that you've taken now is in line with what Heydon recommends. The other advantage is that if JS fails then the user should still be able to see all the content.

I now seem to get one flicker (sorry!!) when I try after the page has loaded for the first time then everything works perfectly - even if I reload the page. If the content is in the DOM I'm not sure why this is?

Sorry, I'm just pointing out problems and not helping!!!

Cheers Dave

@dwhenson No, no - it's good you're letting me know! You are definitely helping! I only wish I could replicate the issue. 😭 There're a few things that might be causing it, but I'm going with the easiest (potential) solutions first. Would you mind testing out this version of the project and seeing if the issue is fixed? I am determined to get to the bottom of this!

@brasspetals - I just tested the alternative version in Chrome and Safari and it seems to work fine - no flicker!! Good one for pushing on with this! I hate these last little bits - they always seem to take forever!

Cheers Dave

@dwhenson Awesome! Thank you so much for checking this for me! It's always been a concern of mine to have bugs I couldn't see/replicate (especially when it comes to animations), so it's massively helpful that you not only pointed out the issue, but also helped me fix it. Again, super appreciate it! 🙏

@brasspetals glad you got it sorted! The project looks lovely!!

Cheers

@christopher-adolphe Thanks for taking to the time to look over my solution! 🙏 The max-width was intentional 🙈, but unnecessary. It's been removed. 👍

Thank you for letting me know about the continued animation issue. It'd be much easier to fix if I could replicate the problem. Would you mind testing out this version of the project and seeing if the issue is fixed? I am determined to get to the bottom of what is causing it!

Hi @brasspetals,

I'm happy to help and glad that this has been helpful to you. 🤝

I've checked the new link and I confirm that the issue is fixed on this version. 👌 I see that you are now applying the hide class directly on the <img /> element.

Great job in resolving this. 👍 See you on the next one.

Best regards.

@christopher-adolphe Awesome! Thank you so much for taking the extra time to look at the new version! 😄

Yeah, I had originally put .hide on the picture to save some code repetition in Svelte. I also had the animations on the picture for the same reason, but noticed it was causing some issues. Don't know why I kept hide on there when I moved the animations to the img. 🤦‍♀️

I also added forwards to the fadeout animation, which should have been there in the first place to make sure the img stays at opacity: 0 when the animation ends. It seems between these two, it's fixed it! Thanks again - much appreciated!

No worries @brasspetals. I am also learning from this. It's a win-win situation. 🤝

I need to find some time to learn Svelte as well. Any resource to recommend ? 🙂

Best regards.

@christopher-adolphe Svelte's official tutorial is actually really good. The Net Ninja has also done a great series on YouTube, which I'll actually be watching more of today as I get into state managment and all that good stuff in my next project. 👍

@AdamMzkr Thank you so much! 😊

@BurritoDoggie Your comments always make my day better - thanks, Alyssa! 😊

Yeah, you don't see this one too often. I just checked - only 38 people have submitted solutions for this challenge, which is low even for a premium challenge.