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

The CodePen you posted needs to be updated to the new GSAP syntax and I’d get rid of the jquery code as well to clean it up. If no one else chimes in I’ll give you a hand later. I’m away from the computer until later tonight.

Definitely! Here's an example from the docs. It uses the ScrollTrigger plugin along with scrubbing to link the tweens to the scroll position. This could be used as a starting point for what you're trying to do. https://codepen.io/GreenSock/pen/WNvVOWw

Hi everyone, The issue here seems to be with the shifting of the background images on slide in / out. In the functions slideIn and slideOut I've commented out the lines of code that shift the background images. With this code removed everything works fine on all browsers. Un-commenting the code adds the image shifting and on Chrome and Firefox, everything works fine with the shifting added. On Safari however, it appears to kill the other tweens that scale the SVG clipping path and do the SplitText animation. Have a look and see what you think. I'm assuming I've made a mistake but then I'd also assume I'd have an issue in other browsers. (Feel free to critique my code as well )

@GreenSock I'll post another thread with an animation that doesn't work properly in iOS Safari but works perfectly in other browsers. Maybe you guys can figure it out. ?

I find if I am going to have issues with any browser, iOS Safari will be the one. I'll craft an animation and it works flawlessly in Chrome and Firefox, but exhibits weird behaviour in Safari. I haven't tried desktop Safari since I run Linux, but iOS Safari is the worst.

No it needs to be inside useEffect because the DOM needs to be rendered before you can animate it.

Not sure if this is causing your exact error but you need to put this: const tl = gsap.timeline({ // yes, we can add it to an entire timeline! scrollTrigger: { trigger: triggerRef.current, start: 'top center', toggleActions: 'play none none reverse', markers: true, }, }); in your useEffect callback. Otherwise the timeline instance will get re-created every time the component re-renders.

And this is why this forum rocks.

Well said @Rodrigo. Sometimes the DRY principle gets taken a little too far and then you're left with code that's incomprehensible.

I think when your useEffect is running its cleanup function, it's killing all ScrollTrigger instances globally. I'm not an expert, so hopefully one of the real experts will chime in. ? Edit: sorry, looks like one of the experts already chimed in! @Rodrigo maybe you can check my answer here! I made the following change to the hook and it appears to work: useEffect(() => { const tween = gsap.to(contentRef.current, { scrollTrigger: { trigger: triggerRef.current, start: "top center", end: "bottom center", scrub: true, markers: true, }, yoyo: true, repeat: 1, opacity: 1, y: 0, }); return () => { tween.kill(); //Kill the tween instead of the ScrollTrigger }; }, []); return { triggerRef, contentRef }; } It just kills the tween instance instead of the ScrollTrigger.