Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Rick May

  • Content Count

  • Joined

  • Last visited

Community Reputation

12 Newbie

About Rick May

  • Rank

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. Thanks guys. Unfortunately, I'm not seasoned enough to write a plugin to get that functionality. I just wanted to make sure it wasn't something Gsap could do already (out of the box) before heading too far down the react-spring rabbit hole. Thanks.
  2. Probably best to show an example... Changing the mass, tension, and friction will determine the length of time, the overshoot, etc. https://codesandbox.io/embed/rj998k4vmm
  3. If I'm not mistaken, that plugin takes an initial velocity and the ending position changes depending on that velocity...? Lets say you have an element that starts at 0. And you want it to get to 100. Is there a way to tell Gsap to animate from 0 to 100 without a defined length of time? It would accelerate from 0, overshoot, and settle at 100 based on friction, mass, etc? Thanks, Rick
  4. Can GSAP function like React-Spring? I.e. you set the mass, tension, friction, etc of an element and give it an endpoint and the timing is taken care of? I'm starting to find myself using react-spring more and more because of its simplicity, but I'd rather just use Gsap for everything. https://www.react-spring.io/docs/hooks/basics Thanks
  5. I never did get it working when my component was a class and never investigated further (where it was working fine in v2.x) since ultimately I'd rather use a functional anyway. Are you using a class? Rick
  6. Thanks guys. After trying to make a reduced example, I decided to write it as a functional component instead of a class. It is now working as a functional. I haven't had a chance to figure out what the reason is. When I find time, I'm going to re-write my project's component (with the draggable) as a functional to try and sort out what is going on. I'll be back once I've figured it out. Thanks again, Rick
  7. While switching a project over to v3, I bumped into an issue that I wasn't experiencing in v2. I'm having trouble wrapping my head around how I can get the same behavior with the new GSAP. Here is what I was doing in 2.x: 1) Create a draggable that would call a function in the "onPress". 2) That function would simply update the bounds and change the snap. The reason I did it this way was to re-apply snap/bounds in the onPress based on values changing as the user interacts with the site. I'm sure there is a better way, but this was what I could quickly come up with in my limited Draggable experience. I'm all ears for a better approach that works with v3. this.draggableObj[0] = Draggable.create(this.screen[0], { type: 'y', snap: {y:0}, onPress: this.draggable__onPress, }); draggable__onPress() { const someValue = 10; const anotherValue = -10; this.draggableObj[0].vars.snap.y = [0, someValue]; this.draggableObj[0].applyBounds({ minY: anotherValue, maxY: 0 }); } This is causing errors while using with v3 ("Uncaught TypeError: Cannot read property 'snap' of undefined") and ("Uncaught TypeError: this.draggableScreen[0].applyBounds is not a function"). Any direction on how I can make this work? Thanks Rick
  8. Alright. I figured it out. Like I said, I'm new at React (insert embarrassed emoji here). I basically was improperly setting up my emitter in my index file. I should of defined this.emitter in the constructor not as a const outside the class. Thanks, Rick
  9. Hi Zach. Thanks for the response. I came across that (React docs) link as well and I also think that could be part (or all of) the problem. I just haven't figured out how to get around it. I'm still very new to React and still trying to come to terms with it. The odd thing is, if I do not use an emitter, there are no errors with trying to tween a null object. Regarding your work around with a check for !null. That does work. Unfortunately in my real world project, there are dozens of tweens on dozens of elements. I'm trying to avoid having to do this, if possible. Although it may be what I end up doing. I'll keep re-reading the docs and searching to see if I can stumble upon something. Thanks
  10. 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
  11. 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
  12. 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
  13. 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!
  14. 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
  15. 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.