Ihatetomatoes

Hi, I am on my mobile so can't really write much code but I belive you just need an array of refs for this to work. Currently you are only animating the last item because that what the anim.current is. Checkout this example on how to create an array or refs in React and use them with ScrollTrigger. https://ihatetomatoes.net/react-and-greensock-tutorial-for-beginners/#5-how-to-create-an-array-of-refs Let me know if that helped.

@GreenSock that is a very clear approach. I was thinking about adding and removing new event listeners but that would be too expensive. Having an array of positions and updating that is much better, thank you?

Thanks @ZachSaucier, this is a great solution and works fine with absolute positioned boxed with fixed size. I have updated my demo where the box size and also the spacing between elements is more dynamic. .box { width: 12.5vw; height: 12.5vw; line-height: 12.5vw; font-size: 10vw; margin-bottom: 200px } Everything works fine on the initial page load. navigation links are scrolling to the right offset the height of the body and #scroll-container is set on page load the height is correctly recalculated on window resize https://codepen.io/ihatetomatoes/pen/zYrJREM The challenge scroll to the right offset after window resize The Issue for each link we are creating the initial eventListener to scroll the window to scrollTo: targetRect.top on page resize targetRect.top remains the same I know we are going into the scrolljacking rabbit hole here, but I am trying to update the code to make this happen. Any insights are very welcome.

@fogseller yes it is possible, just remove the height from the #scroll-container. You will also need to remove position: absolute from the .line element to make sure that there is some content that will stretch the #scroll-container.

@greensock one more question. I see that you have made the initial tween of the container a variable let scroll = gsap.to(container, {...}) How does this change the way ScrollTrigger manages the container tween? In other words why do you need to store it in a variable?

Haha, I wouldn't do that to @OSUblake. It feels hacky but yes it delivers a smoother scroll experience without using any additional library.

@GreenSock, yep that is it, thanks Jack. Is this your recommended approach for smooth scrolling with navigation? I like this approach. The default body scrollbar instead of the scrolljacking. It is great to see that so much can be achieved purely with the GSAP suite of plugins.

Hi everyone, I have been playing with the new ScrollTrigger and smooth scrolling (without scrolljacking). Blake's Codepen was very useful. https://codepen.io/ihatetomatoes/pen/zYrJREM I have made a modification where there is a navigation that scrolls to the right box. Everything works when you click on the navigation links but the window scrollbar is out of sync. https://codepen.io/ihatetomatoes/pen/zYrJREM I have tried a few things such as updating the documentElement.scrollTop when the tween is completed but it is still out of sync. Does anyone know what am I missing? Cheers Petr

Thanks Rodrigo for the code examples. I know most people here prefer the class approach for the more readable code, but I think it's useful to give people a clear way how to use GSAP tween and timeline with both class and hooks approach. If you think there is something missing or not clear enough in this guide please let me know. https://ihatetomatoes.net/react-and-greensock-tutorial-for-beginners/ I will create more guides for React + GSAP and class approach would definitely be one of them.

No problem. I have just changed the way the ref is used in the markup and passed text.current to the tween, that seems to be the right approach according to the official React useRef docs.

Again, I am not sure what effect you are trying to achieve but the link I posted would be my way how to update state after a tween is completed. Hope that helps.

Hm I am not 100% sure what effect you are trying to create but when I pass test.current to the tween I don't see any issue with updating the state in the onComplete. https://stackblitz.com/edit/react-bowg4f

Hey Tom, it's Petr here from Ihatetomatoes.net, was the article that @ZachSaucier pointed you to useful? Let me know if I should add anything to the guide. Cheers

Hi @Tonycre8, I have put together this simple guide on how to use GreenSock together with React Hooks. Hope you will find it useful. Cheers

No worries, happy to help. GSAP3 has a new syntax so gsap.to() is a new way of doing TweenLite.to() Checkout the docs for the new GSAP3 syntax.

I don't think you are doing anything wrong with the refs, but I would tweak it slightly. Here is a working demo, hope that helps. https://codepen.io/ihatetomatoes/pen/MWKmJaY

Hi @flefloch, you can use the clearProps:'y' to clear the y property when tween is finished.

Hi Paul, I am not across the whole thread but just looked at your demo and see that you are trying to manage the spinning state in both the App and Wheel components. Shouldn't you just have one spinning state?

Great, thanks for the update Zach.

Hi everyone, I have just published GreenSock Snippets for VSCode. Let me know if I have missed some important snippets. And apologies for my inaction in the recent times when it comes to writing and recording tutorials, I still love GSAP and creative front-end coding. Cheers Petr

I have ported the Sublime Text snippets to VSCode extension. If you are switching to VSCode, simply search for GreenSock Code Snippets in the marketplace. It works exactly like the Sublime Text snippets, all credit goes to Carl. Enjoy!

Hi Fernando, you have to target the individual paths inside of the SVG instead of the SVG itself. Here is the updated CodePen: http://codepen.io/ihatetomatoes/pen/e3d7fc0fcc29b80c115fc7e6d4be97a3/ Also note that I have set the TO value to be "100%" instead of 100, because the length of each letter is different. 100% will always animate the path to the full length. Hope that helps.

Have a look at this CodePen demo, you can use similar approach and move the cloud back to the start when it goes outside of the parent. http://codepen.io/GreenSock/pen/QEdpLe Hope that helps.

@swampthang, great to see that you've made your almost beta. And thanks heaps for signing up to my workshop! You are awesome!

If you manage to isolate the issue into a reduced CodePen demo, I am sure we can point out what is wrong with your code. At the moment it looks like too many plugins are affecting the layout of your page and it could be any of the other plugins causing the issue. Try the delay as you suggested, but I doubt it will help. Sorry I couldn't be more helpful. And you English is perfect, no need to apologize