Rick May

I've been having an issue with a Gatsby project I'm working on. I've reduced it down to a codesandbox example... codesandbox example Visit the link and drag the top grey box to see the bottom orange box follow. What I'm doing is passing the drag value as an emitter to the second box (which is a component). The tween on the orange box works fine, until you go to another page (click on "Go to page 2") and then return to the original page. Now, when you try to drag the top box, the bottom box doesn't move and an error ("cannot tween a null target") goes to the console. I've been pulling my hair out trying to figure out what the problem is. I originally thought the issues was caused by the reference being re-created when going back to the original page. However, Gsap seems to be okay with this as long as I'm not using an emitter at the same time. I'm not sure how the emitter is playing into this. Does anyone have any idea what I can do to get around this. I feel like I've hit a wall. Thank you! Rick

4 hours later and I figured out my problem. I'll post what mistakes I made and how I fixed it just in case someone else has something similar. 1) Ignoring ThrowPropsPlugin via gastby-node.js was indeed needed as @danboyle8637 had to do. 2) My site was then able to build without errors, but was not functioning like it did under development. A- When I first starting setting up this site weeks ago, I used NPM to install GSAP and imported into my jsx with the following... import { TweenLite, TimelineLite, Draggable } from 'gsap/all'; B- As someone who was new to Gatsby, React, and even NPM, I made a naive mistake back when I started this project. After downloading ThrowPropsPlugin, I dropped it into my node-modules/gsap directory. ThrowProps was imported from within all.js. C- This worked fine in development, but as soon as I would build, ThrowProps was lost. D- I've now moved ThrowPropsPlugin.js to a directory in my project instead of having it live within node-modules/gsap. E- Everything builds fine (after ignoring ThrowPropsPlugin with gatsby-node.js as described above) now and the built site functions as it should. I only discovered this was the problem when I used NPM to update to the latest GSAP this morning to eliminate that as an issue. During the update, ThrowPropsPlugin was wiped from the directory and my development site suddenly stopped functioning in exactly the same way the built site was not functioning. Whew.. At least it works now. Thanks!! Rick

Just by chance, I ran into this exact same problem today. Unfortunately, I'm not able to get everything to work correctly and was hoping someone, perhaps @danboyle8637 would have a suggestion. My gatsby site works fine in development mode. When trying to build, it threw errors that GSAP was causing. The errors were similar to what Dan had. I tried Dan's gatsby-node.js solution and it will now build. Here my gatsby-node.js file. exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => { if (stage === 'build-html') { actions.setWebpackConfig({ module: { rules: [ { test: /gsap/, use: loaders.null(), }, ], }, }) } } Although my site builds now without errors. It has lost GSAP functionality. In particular, I cannot throw props and tweens don't seem to be working. Interestingly enough, I can still drag objects via Gsap draggable. Can anyone offer any advice on what I can do? I'm pretty frustrated with GSAP at the moment and have run out of ideas. (Please note, I'm somewhat new to Gatsby/React). Thanks, Rick

Woah. Way cool. Thanks so much for making me aware of EventEmitter and for taking the time to show me how. I love React for several reasons, but it can be really confusing for me at times to do some pretty (seemingly) simple things. I'm hoping I'll adapt sooner than later. Thanks again!

Here is a reduced demo... https://codesandbox.io/s/zkvk1jy91x Main things I'm looking to do. 1) When a throw completes (albeit no throwing in the demo) on opening.jsx, I'd like to be able to notify closing.jsx so that it can then play a timeline. 2) I'd like to be able to freely pass values back (for instance, the y position of the opening draggable) and forth between children. From my limited experience with React, I'm under the impression that I cannot directly pass stuff between children components. But must go from the child to the parent and then onto another child. So, I'm wondering if I'm better off creating the draggable objects in the index.js. If one of the draggable needs to notify either opening.jsx or closing.jsx components, it would eliminate one of the steps. However, I do like having the draggable in each child component so that it is all neatly kept together. Thank you, Rick

I'll try to set some time apart today for a demo to make it a bit more clear. Thanks for the link. I will check it out.

I'm very new to using React (I'm using Gatsby) and still wrapping my head around how best to handle various situations. I thought I had a methodology all worked out for this particular website, but I'm starting to question whether I'm taking the right approach. I hope an expert can offer an opinion or two. This (it isn't for a client, but for my own educational purposes) website is a single page with several full screen sections. Each section is a separate component, and inside each of these components, I have a GSAP draggable. Click and drag to navigate to the next section. All of this is working for the most part. As I get further along, I'm starting to question whether this is the best approach. Each of those draggables (contained in its own "section" component) need to communicate values to each other. Since I'm new to React, I'm still figuring out how to best share values between the child components. So... I started wondering if it would be better to have all of the separate draggables created in the index.jsx (parent) instead of the components. This way, it would probably be easier to share info across the draggables. I would only need to communicate minimal (i.e. drag has ended, begin a timeline that lives inside the component) information to the components. I guess my question is. If you were to work on a project like this, would you be more likely to create the draggables in the parent, or in the child components? Or, is there a completely different approach you would take? Doing this with a "normal" non-React website is pretty straight forward. But, I'm struggling a bit as I learn the React way. I'm not look for a solution, but more of a "I would take this approach because..." Thank you, Rick p.s. I hope this is appropriate for this forum. I thought because there are so many smart GSAP'ers here, it was worth a shot.

Thanks for the response. Yeah, I had that set to play instead of pause because I mistakenly thought that componentDidMount() didn't fire until everything was loaded and rendered. Once I realized that wasn't the case, I just left it cause I didn't know what to do next. I'll check out the preload thing. I guess I was hoping there was something like window.onload that would wait for not only all images on the page (not just the ones I would have to reference individually), but any scripts too. Thanks

Disclaimer: I've just started working with React. I searched far and wide to try and find a solution. The closest I've come within this forum: The first reply from Rodrigo demonstrated how you can start a tween from componentDidMount. However, the tween is starting from a delay instead of when the site has finished loading/rendering. I've made my own example that simply loads a large image from placekitten.com. I'd like the tween to start after the image has fully loaded. https://codesandbox.io/s/3141jvqkwm Unfortunately, componentDidMount() is not doing what I expected it would. It is playing the tween before the image has finished loading instead of after. While this is most likely more of a React issue than GSAP, I've struggled to find a solution anywhere (including using an event listener inside of componentDidMount). I figured someone here has successfully triggered an animated transition from a loader screen to the site after it has fully loaded. Anyone know how I can achieve this? Thank you. Rick

Thanks for the responses. I'm excited to learn more about React as there is a lot a like about it. Just wanted to make sure it and GSAP played nicely together before I become too invested. Thanks again.

I hope this topic is acceptable. I couldn't find a more appropriate place to ask in this forum. Before I proceed too far with the switch to Gatsby (and learning React). I was wondering if those more experienced can tell me if building a GSAP heavy site would perform better or worse (or the same) as a static site built without React (I currently use Hugo). I'm thinking about this move for no real reason other than I've always wanted to learn React. I just do not want to go too far down the rabbit hole if there will be a performance hit with this combo. Thanks.

Nice. That was easy. I appreciate you pointing me in the right direction. Thanks, Rick

I'm using draggables to flip between pages on a site I'm building. If you look at my Codepen, the grey container represents my full screen (non-scrolling) website page. The orange area is what I want to drag and throw. However, I do not want to require the user to have their mouse over the orange area to throw it. They should be able to be anywhere on the screen. You can currently do that until you drag/throw it the first time. Then the grey/draggable container exposes an area that you can not grab to throw the orange. Hopefully this makes sense. I'm having a hard time articulating this. Ideally, I would like the grey area to never move, but accept the grab/drag/throw, then apply it to the orange container. Is this possible? I'm probably looking at this all wrong and it is something simple. At least I hope that is the case. Thanks, Rick

Thanks! Much appreciated.

I've just started playing around with throwProps and I'm having some issues when using it to scroll through a page. It is probably something simple and I'm hoping someone more experienced can set me straight. If you look at my Codepen, you'll see that I've tried creating two types of Draggables. Neither one is behaving as I'd like. The first "type: scroll" keeps snapping back to the top of the page when trying to scroll down. And the "type: y" scrolls beyond my section at both the top and bottom. Neither are desirable. The behavior I'd like to see is either, 1) Cannot scroll beyond the 'section', or 2) It snaps back to the section when trying to scroll beyond the 'section'. If possible, I'd like to know how to do both of these. Thank you very much, Rick