[Struggling with GSAP in Frontity/WP Environment]

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

[Struggling with GSAP in Frontity/WP Environment]

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.

 

[Struggling with GSAP in Frontity/WP Environment]

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!

[Struggling with GSAP in Frontity/WP Environment]

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