Ian Robinson

I complain about using pre-fab code as it's generally too much work to reverse-engineer and tweak but that's what I was doing right here. Came up with a straight CSS/jQuery solution in like 30 minutes versus the hours I was working on the previous code. Plus I can expand with GSAP if need be but works great just like this if anyone else is looking for the same thing (and can add in GSAP) *I'll add to this CodePen if I end up infusing some GSAP though to keep it relevant to the community https://codepen.io/ilrobinson/pen/ExJOvga

Thanks, Mvaneligen! It's close, but due to the amount of information (there will be dozens of sub-menus within each menu item) and how it's presented I want it to function like my second version where main menus collapse when others are opened, and the same with the sub-menus as otherwise it's just a long list of drop-downs that the user has to go back and keep closing.

This is my close fix, but it has the main issue of the parent div not expanding with the content when you click on the Link 2 > link 1b. And again I'm wondering if there's a cleaner approach with the code https://codepen.io/ilrobinson/pen/RwOepde

Hey Greensockers! Found this very helpful pen and wanted to expand upon it by nesting drop-downs within drop-downs. I had tried by duplicating the code and giving the nested divs different class names but that didn't seem to work at all (plus it felt like a very heavy-handed solution). Thanks in advance!

Thanks for your reply, mvanelgen! Yes, as I mentioned, it works fine in CodePen, but if you click on the example running outside (https://playground.ilrobinson.com/030624.1/index.html) you see the issues (and mind you I disabled all additional scripts running in it) - why I initially wanted people to look at the example with the issue. I like to experiment with different methods every time I work on a new project and hadn't used SVG shadows before so wanted to give them a try. Part of the experience is learning what to do when something breaks so was hoping to figure out if it's possible to correct or if it's just a conflict issue (in this case with GSAP). To your point I imagine the rendering with Safari seems the most logical in that the portions requiring running multiple transitions alongside the shadows is the conflict. Possibly a future version of Safari will handle it better.

Alright. I went back in and pulled out code to make rough pens of two of the pages as it seems that on occasion the internal page issues will clear up, but the front page tends to be the one that always breaks in Safari. I had tried a pen before I came on here but the issue isn't duplicated running through CodePen in Safari as you will see when looking at them. To see the actual issue you need to see it live (https://playground.ilrobinson.com/030624.1/index.html) - and there are no additional plugins or scripts being run that aren't in the pens. landing page: https://codepen.io/ilrobinson/pen/xxeEGeW internal: https://codepen.io/ilrobinson/pen/LYvRVmd

Sorry. I just reread your post and saw the comment about Stackblitz and I'm not really a back-end person, but can work to figure it out if seeing the live dev isn't enough.

Thanks for the reply! I was trying to root out if anyone has already come across this issue before I started sharing code/posting as understandably CodePen snippets don't reproduce the error as I'm fairly confident it's isolated to a Safari conflict along with this being integrated into a Wordpress theme (and it'd be impossible to share without integrating their CMS into CodePen). But the dev page I showed is found at: http://dev.radiologyhealthequity.com/our-team I'd be happy to pull out any particular code if something is unclear though.

I built a WP theme that involves SVG shadows and it works fine in every browser (even verified with Opera and Arc), but for some reason ONLY Safari (running version 17.1) gives me issues. E.g. knocking out and leaving a relic of a shadow behind when something moves, blinking in and out on transforms, hitting a speed bump scrolling down until an animation completes. Anyone else run into this issue? *attaching vid of examples of the issue before trying to supply isolated code in hopes that someone else has already run into this issue before and knows the solve Screen Recording 2024-03-12 at 2.38.38 PM.mp4

Sorry, tried to edit/delete this and update my question so ignore this and go ahead to my following post. Screen Recording 2024-03-12 at 2.13.56 PM.mp4

Out of curiosity, I tried wrapping the GSAP script, as well as the Lenis script calls. Lastly, I did a dynamic load in the broken version and every attempt seems to only allow GSAP to work for the first few animations on load with a clear cache then everything after doesn't work, and fewer items function on reload. The last attempt is still on the "broken" version URL. No need to look for a fix as I'm aware this isn't a Lenis support page and changing the variable seems to work fine, but in case you were curious about the solutions you offered. Thanks again for digging around though.

Thanks for that, Jack! This is still just the rough dev HTML that I'm cleaning up but I appreciate you catching those things! And hope it helps to anyone else who tries digging around for days because of a Lenis + GSAP error.

Perhaps it's not pertinent as I fixed the issue as stated. But if you wish to look for a deeper issue it's more than I can show in a CodePen so below are links for the initial HTML dev page on the server I was working with to find the fix. marked the section of code on line 43 of assets/gsap.js on both. The broken code had the default "t" and the fixed has "s" (I also had tried "g" but that broke some stuff as well): http://htmldev.radiologyhealthequity.com/example-broken/ http://htmldev.radiologyhealthequity.com/example-fixed/

The Lenis code is imported. How are you implementing the library in your build? <script src="https://unpkg.com/@studio-freight/lenis@1.0.33/dist/lenis.min.js"></script> <script> const lenis = new Lenis() lenis.on('scroll', (e) => { console.log(e) }) function raf(time) { lenis.raf(time) requestAnimationFrame(raf) } requestAnimationFrame(raf) </script>

I'm not sure if it's directly connected with your issue as I found your post when looking for a fix for my issue with Lenis causing issues with GSAP and thought to add it in case it is any help. But I just did as I mentioned, replaced the variable as it seems that Lenis was already using the default "t" so I tried a couple other letters that fixed it to varying degrees of success but finally everything seemed to work well when I changed it to "s". Here's the chunk that I changed it in: const contactIcons = gsap.utils.toArray("header .contact-icon"); contactIcons.forEach((icon) => { gsap.set(icon, { xPercent: "-100", opacity: 0 }); const s = gsap .to(icon, { scale: 1.2, transformOrigin: "center center" }) .reverse(); icon.addEventListener("mouseenter", () => s.reversed(!s.reversed())); icon.addEventListener("mouseleave", () => s.reversed(!s.reversed())); }); const s = gsap.to(contactIcons, { x: 0, opacity: 1, duration: 0.5, stagger: 0.2, delay: 1 }); ScrollTrigger.create({ start: "top+=50", end: "+=1", //markers: true, onEnter: () => { s.reversed(!s.reversed()); mainTimeline.reversed(!mainTimeline.reversed()); }, onLeaveBack: () => { s.reversed(!s.reversed()); mainTimeline.reversed(!mainTimeline.reversed()); } });