Struggling with GSAP in Frontity/WP Environment

[AGW]

Hey guys, I'm very new here (& not all that great with programming) - long time lurker, big admirer of GSAP and happy be in the club! I'm hoping somebody here can help me figure out what I'm doing wrong. 

 

I'm basically attempting to convert this simple CodePen into Frontity/React (embed at bottom of post). 

 

 

Here's the link to my CodeSandbox

https://codesandbox.io/s/xenodochial-saha-mfj42?file=/packages/mars-theme/src/components/test-scroll.js

 

The errors I get seem to come from my scroll-test.js file. No matter what I do, I can't seem to get any ScrollTrigger action (or even basic 'to' motion).  There have been some phantom moments once I've changed some code to target a different element, the page instantly begins to animate - but after I refresh, I'm given fatal errors instead. Not really sure what that is...

 

If I attempt to target certain elements, it won't run.

 

If I target a previously declared component, it at least runs - but it claims scrollTrigger is an invalid property

 

I'm left to believe that GSAP isn't properly firing. Any ideas for troubleshooting this problem?

Happy to supply any additional information requested. I tried to follow the rules and created my problem on codesandbox, since it was the only service that had Frontity available.

 

Cheers,

AGW

 

 

 

See the Pen QWGwQYv by agw421 (@agw421) on CodePen

[AGW]

I'm currently looking into React Refs:

https://reactjs.org/docs/forwarding-refs.html

 

The big problem I'm having is targeting a child dom element from within a react component. If I was able to target the H3 inside of the Section component, I'd be able to test GSAP's functions further.

 

This might be tough for me to pull off, but I'm diving in right now!

[ZachSaucier]

Hey AGW and welcome to the GreenSock forums.

 

I've never heard of Frontify. Have you already read through the article about getting ScrollTrigger working with React in our learning section? I think they would greatly help you understand how to set things up. I also think our modules installation video and the install helper on the installation page would help you out. To be honest I think you going through those materials will help you understand better than us fixing your issues for you  But if you go through them and have a specific question about GSAP let us know and we'll do our best to help.

[AGW]

Thanks @ZachSaucier

 

I appreciate the help! The article you brought up is actually why I mentioned React Refs. While her example isn't built with Frontity in mind, I'm hoping I can figure out the translation points by going back and forth between all these learning sections. Not as easy for a beginner, but I'm trying here. I only asked after going through all of your and their documents - I'm not the type to expect others to do my work for me lol.

 

What makes this sticky is what I mentioned above: Targeting children DOM elements from within a component seems to be a requirement to figure this out.

 

Oh, and it's Fronti-TY not -FY. It's a React framework and port of WordPress. Fairly new, but serves the purposes my clients need without limiting the experience.

 

[ZachSaucier]

Maybe @Rodrigo or @elegantseagulls can help with the ref forwarding?

[Rodrigo]

Hi,

 

As Zach mentions, this is related to the way Styled Components work, but lucky for us, they have made some strides in order to facilitate the access to the actual DOM nodes.

 

Basically you have to pass a ref to the styled component you want to target in your GSAP instances, store that using the useRef hook and then just use ref.current in order to access the DOM node. This is a super simple example that takes the code from your file, without any errors:

 

https://codesandbox.io/s/gsap-scrolltrigger-styled-components-pzqy2

 

Hopefully this helps you get your site going.

 

Happy Tweening!!!

[AGW]

@Rodrigo

This is precisely the method I was looking to figure out to unlock myself. Thanks for putting in the time to help out! I'm sure others will find this useful in the future too. 

 

I'll be posting my progress as well. Cheers.