[Using gsap.utils.toArray in React]

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.

 

[Smooth Scrolling (Not Anchor-Jumping!)]

@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👌

[Smooth Scrolling (Not Anchor-Jumping!)]

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.

1. navigation links are scrolling to the right offset 
2. the height of the body and #scroll-container is set on page load
3. the height is correctly recalculated on window resize

See the Pen zYrJREM by ihatetomatoes (@ihatetomatoes) on CodePen

 

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.

[Smooth Scrolling (Not Anchor-Jumping!)]

@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.

[Smooth Scrolling (Not Anchor-Jumping!)]

@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?

[Smooth Scrolling (Not Anchor-Jumping!)]

Haha, I wouldn't do that to @OSUblake.

 

It feels hacky but yes it delivers a smoother scroll experience without using any additional library.

[Smooth Scrolling (Not Anchor-Jumping!)]

@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.

[Smooth Scrolling (Not Anchor-Jumping!)]

Hi everyone, I have been playing with the new ScrollTrigger and smooth scrolling (without scrolljacking).

 

Blake's Codepen was very useful.

 

See the Pen zYrJREM by ihatetomatoes (@ihatetomatoes) on CodePen

 

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.

 

See the Pen zYrJREM by ihatetomatoes (@ihatetomatoes) on CodePen

 

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

[Update React State with onComplete and repeat]

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.

[Update React State with onComplete and repeat]

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.

[Update React State with onComplete and repeat]

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.

[Update React State with onComplete and repeat]

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

[Update React State with onComplete and repeat]

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

[GSAP ReactJS and ScrollTrigger]

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

[React - Tween Y pos of items in a list and refresh position]

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.

[React - Tween Y pos of items in a list and refresh position]

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.

 

See the Pen MWKmJaY by ihatetomatoes (@ihatetomatoes) on CodePen

[React - Tween Y pos of items in a list and refresh position]

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

[Dynamic animations with React props and state]

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?

[GreenSock Snippets for VSCode]

Great, thanks for the update Zach.

[GreenSock Snippets for VSCode]

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

 

 

[SublimeText, Atom and VSCode Snippets]

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!

[Not working out DrawSVG plugin]

Hi Fernando, you have to target the individual paths inside of the SVG instead of the SVG itself.

 

Here is the updated CodePen:

 

See the Pen e3d7fc0fcc29b80c115fc7e6d4be97a3 by ihatetomatoes (@ihatetomatoes) on CodePen

 

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.

[infinite animation]

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.

 

See the Pen QEdpLe by GreenSock (@GreenSock) on CodePen

 

Hope that helps.

[Multi-colored lines in SVG]

@swampthang, great to see that you've made your almost beta.

 

And thanks heaps for signing up to my workshop! You are awesome!

[Animation lagging sometimes]

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