Jake Snellin

Hi there! Hope you're well. I've made a website here https://ecstaticdancebrighton.co.uk/ . The sun is a 3d sphere with a linear gradient rotating 360 degrees on a loop. I made the animation in Spline. It feels a little unnecessary to have a 3d animation for this. I'm using a placeholder image for the 2 to 3 seconds it takes for the animation to fully load. It also glitches from time to time - not appearing at all. I'd ideally like to use gsap for this animation instead and simplify, however I can't seem to wrap my head around the best approach to animate a rotating gradient. I also couldn't find much in the forum about this. Any help pointing me in the right direction would be great. I've tried targeting the linear gradient and animating the stop values, but it's not looking as I'd hope. I can provide a minimal demo of what I've tried so far if helpful? Look forward to hearing from you! Thanks, Jake

When I disable reacts strict mode it behaves as expected. 🤨 How can I improve the code to have it work correctly when strict mode is true? Thanks! Jake.

There seems to be a logic error. It's working ok in the demo, however when I try and incorporate it into my react project, passing the first trigger causes the timeline to play once from beginning to end. I'm not really sure why it's happening. I'm now using xPercent for the tween which wasn't the case in the demo. I suspect it's something to do with the loop and the tweens creation? Here's the code from my react project. mm.add("(min-width: 1300px)", () => { tl.current = gsap.timeline({ paused: true }); for (let i = 0; i < btns.length; i++) { if (i === 0) { continue; } else { tl.current.to(".target", { xPercent: "+=109.71", duration: 1, }); ScrollTrigger.create({ trigger: sections[i], start: () => "top " + navHeight.current, end: () => "bottom " + navHeight.current, animation: tl.current, onEnter: () => tl.current.tweenFromTo(i - 1, i), onLeaveBack: () => tl.current.tweenFromTo(i, i - 1), }); } } });

https://stackblitz.com/edit/stackblitz-starters-abtcvv?file=app%2Fpage.tsx Hi gsap team 🙂 Hope you're well. Is the approach used in my demo efficient for animating menu items on scroll? Is there anything I should be doing differently? I'm still relatively new to gsap and could do with a little feedback. Look forward to hearing from you. Thanks for all your help with my project so far, Jake.

Thanks @Rodrigo & @GreenSock The demos have been a great help. Everything is running smoothly now. All the best!

https://stackblitz.com/edit/stackblitz-starters-bp9wad?file=app%2Fpage.tsx Hi Rodrigo. Thanks for your reply and the helpful demos. I have provided the editor link above. I hope this works. The animation is a little more elaborate than before, with the circle exiting the viewport and then remerging further down when it meets an animated svg. The screen resizing is still the issue here with the circle moving after reaching it's target. Would you recommend flip still as the correct approach given the animation is a little more complex? Thanks for your help! Jake

https://stackblitzstartersnkxswz-m4jx--3000--09144545.local-corp.webcontainer.io/ Hi there! I have made a minimal demo demonstrating the issue I'm having. I'm attempting to move a circle from its position at the top of the page to the position of a square further down below some text. The circle reaches the target fine, however whenever I resize the window the main containers height changes causing the circle to jump out of alignment. How can I prevent the circle from moving up and down during the animation on window resize? I've tried using invalidateOnRefresh and functional values hoping these would help reset the circles position. Using these does update the scrolltrigger end marker, however the content still moves. I'm wondering if this due to the way I have structured the code and the css using absolutely positioned divs? I want to keep the text responsive, without resorting to a fixed width container. I'm new to gsap and loving it so far. Any help would be greatly appreciated! Look forward to hearing from you.