12/23/2023 0 Comments React parallax codepen![]() ![]() String' is not assignable to parameter of type OpaqueInterpolation', gave the following error. This gives an error for trans1 in TypeScript, however: const trans1: (x: any, y: any) => string This pattern of code is directly from both the codepen and the docs. each image is a series of these 'animated divs' and translations. Take this code for example with my mouse parallax images component: The typing of this function is badly broken and it causes some issues. When I feel confident enough, I'll likely raise these issues directly on their Github and hopefully fix it myself, but for now, these temporary fixes will work.īoth issues have to deal with the `interpolate` function, which is a common React-Spring function. Sadly this is not the case, and in both animation examples, I needed to consult StackOverflow for fixes. Even without actually defining any real types as I often do because of my lack of experience with TypeScript, at least with React, it means that you don't need to ever actually define Prop Types or many other things - likely you're already defining them for your components! It prevents silly errors due to variable types and really does make your code better.Īnyway, you would think React-Spring works right out of the box with TypeScript no problems. If you already don't know my thoughts about TypeScript, I'm of the opinion that it should be the new standard for web development, and I think JavaScript as a whole needs to go. While documentation for React-Spring is great, there's a major issue plaguing it - TypeScript compatibility. I'm not going to go into the details of how to build those, but you'll end up seeing some code from those anyways. I definitely took this approach with several features of this demo page, which mostly featured a few mouse parallax images, as well as a menu feature. While building it from scratch is usually left best to more experienced UI/React programmers, they do provide some examples and codepens to "borrow" from. ![]() What is React-Spring? It's basically a series of custom Hooks that let you transform with animations. Whether this was a good or bad idea did not matter to me - I get to test out a new toy! In comes React-Spring! For a quick demo I created for a company, I knew I needed to use mouse parallax, as they had expressed interest in that kind of website feature ( ). ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |