BrianCross

Hi John, this is great! I downloaded the repo and ran it locally. I'll be dissecting the code and adding the functionality to my own projects. Thanks for sharing this!

Ah, good to know. I’ve never really used it before. Thanks for the info.

Excellent, thank you so much Jack. Yeah, Safari is terrible; very frustrating to work with. All three of your suggestions fix the issue. I think the will-change: transform; is the best solution since it allows GSAP's optimizations to be used. Thanks again; it's much appreciated!

Hi Everyone, hope your weekend is going well. I updated my iPhone to iOS 15 the other day and now some animations that worked fine before have some strange rendering bugs. If you open this CodePen on an iOS 15 device you'll see what I mean. When you open the nav menu it's fine, but when you close it some sections of the div are left behind. I've confirmed similar strange behaviour on 2 other sites I've built recently. Adding the autoAlpha property to the tween is a workaround but shouldn't be necessary. The animations of course work perfectly on Chrome desktop. Has anyone else seen weird behaviour on Safari 15?

I like Inkscape personally, along with SVGOMG to optimize, and then usually some manual editing of the code.

Awesome work! I love it as well. Very professional looking. ?

Hi Jack, yeah I saw a post regarding the issue with NPM 7. I had tried your suggestion above but it still threw the 403 error. I'll check out that other thread as well. Thanks!

Welcome to the forum @rimedtades. I'm pretty new here as well and it's a fantastic community. Is this what you're looking for? https://codepen.io/BrianCross/pen/xxqZaNB

Hi everyone, I'm getting the following error while trying to install from the private registry: $ npm install gsap@npm:@gsap/shockingly npm ERR! code E403 npm ERR! 403 403 Forbidden - GET https://npm.greensock.com/gsap - bad authorization header. Please login again npm ERR! 403 In most cases, you or one of your dependencies are requesting npm ERR! 403 a package version that is forbidden by your security policy, or npm ERR! 403 on a server you do not have access to. This is a Next JS project that I'm starting. I just worked on another Next JS project and had no issues installing from the private registry. I've searched a few threads and all suggested solutions result in the same error. I've double checked the authorization token and I actually copied the .npmrc file and .env.local that contains the actual token from the previous project.

@OSUblake @GreenSock thanks so much guys. Yeah I think this is a much more elegant solution than what I was thinking. So much learning going on here and it's much appreciated.

Hi everyone, Just wondering what the best practice is in this case. I'd like to always pin the container divs in this CodePen example to prevent them from un-pinning at each end of the scroll range. Currently they'll un-pin as expected and the tween will then scroll up or down as it finishes up. What's the best way to keep these divs in place so the next tween can start while the previous one finishes up, without any of them moving vertically? I'm sure I can figure out a solution but I'd like to know if there's a simple technique I might be overlooking. Thanks in advance and happy tweening! Brian

It's so bad, right?? Part of the problem is the clip-path behaviour in Safari will work in certain situations and break in others. Very annoying. I re-created the animation using outer and inner sliding divs, so it doesn't use a clip-path at all and therefore works in Safari. I'll probably implement the final animation this way. https://codepen.io/BrianCross/pen/32bf98f7eed988d5dfc5b148cf85bacc

Hi Jack, very interesting. I read the threads you posted and yeah I get what you're doing. Thanks very much for the assistance; your workaround works perfectly. Strange that Safari doesn't fix bugs like this. ?‍♂️ Thanks again for your help!

@GreenSock I've got a stripped down pen here that replicates the issue. If you un-comment the three lines that shift the image it breaks the whole thing in iOS Safari. https://codepen.io/BrianCross/pen/3e0816eea3199e4a6cb25dcb5cb90833

Hey, this is super quick and dirty. I just removed all your JavaScript code and added a couple ScrollTriggers. I changed the CDN links as well in the JS settings. https://codepen.io/BrianCross/pen/XWpqbev