Kirdes Posted February 2, 2022 Share Posted February 2, 2022 Hello ! When this animation starts, I want each column to go from `x: 0` to his original x position and only after that,animate each square to his y position. Actually, you can see in the codepen, it animates directly the x and y position. I tried with Keyframes, but problem is, I need to know the initial value, I can miss something. Hope, you can understand what I'm trying to achieve. And I have a bonus question : Is anyone can tell me how to handle resizing correctly ? Is it possible to just resize element without restart the animation ? I'm actually building a website with react and I'm facing some issues with resizing: - animation restart when resizing - on tablet/mobile ( tested in chrome and FF ) is like there is no resizing. I can also provide an example with React but this is not the forum's topic and I guess its maybe an other topic Thx Ced See the Pen OJOXXXg?editors=0010 by kirdesmf (@kirdesmf) on CodePen Link to comment Share on other sites More sharing options...
Solution OSUblake Posted February 2, 2022 Solution Share Posted February 2, 2022 Hi @Kirdes I would just grab all the y positions before you start the animation kind of like this. See the Pen MWOejVy by GreenSock (@GreenSock) on CodePen As for resizing, there are bunch of different techniques you can use. If you can keep the canvas in the same aspect ratio on resize, and use relative units in the CSS for the canvas width and height, like %, then it will automatically scale down just like an image. Another technique is to just use ratio's for sizes and positions, usually a from 0 to 1, and then in the render/draw you would multiply those values by their respective canvas width and canvas height values. Think of it kind of like using vh and vw units. Then when it resizes, the only thing you really need to update is the those width and height values. Link to comment Share on other sites More sharing options...
Kirdes Posted February 2, 2022 Author Share Posted February 2, 2022 Oh Function based values, nice ! Again thanks @OSUblake and also thx for the resizing tips. Link to comment Share on other sites More sharing options...
Kirdes Posted February 2, 2022 Author Share Posted February 2, 2022 Other question, How can I can start the y animation once the column in x final position, not all column ? Link to comment Share on other sites More sharing options...
OSUblake Posted February 2, 2022 Share Posted February 2, 2022 11 minutes ago, Kirdes said: Other question, How can I can start the y animation once the column in x final position, not all column ? Do you mean like this? See the Pen MWOebbo by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
Kirdes Posted February 3, 2022 Author Share Posted February 3, 2022 Just needed to play with delays See the Pen GROqNRa?editors=0010 by kirdesmf (@kirdesmf) on CodePen 2 Link to comment Share on other sites More sharing options...
Kirdes Posted February 4, 2022 Author Share Posted February 4, 2022 To be honest, I'm not sure I understand resizing. I know that I can use css and that the canvas will behave like an image ( object-fit: cover for example ) The problem I have is that at some screen size the canvas will be cut. When I resize the canvas with js, the canvas changes size but the drawing does not scale. Concerning the ratio, I don't really see how to do it after several researches. I understand that positions and sizes can be proportional to the screen size but it's still unclear to me. Maybe it would be better to use a librairy that takes care of this kind of thing for me ? or maybe I overthink it. My goal is to have this grid of squares visible at any time, other objects are animated in relation to other objects and to the screen Link to comment Share on other sites More sharing options...
OSUblake Posted February 4, 2022 Share Posted February 4, 2022 A library won't take care of that for you. You'd be running the same issues if you were doing HTML or SVG. You have to choose the best option for your situation. With the ratio option you basically move most of your calculations into the render part. See the Pen JjORKXV by GreenSock (@GreenSock) on CodePen What I normally do for resizing is to just reinitialize everything. The animation will restart from where it left off. See the Pen XWzjdLB by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
Kirdes Posted February 4, 2022 Author Share Posted February 4, 2022 If I correctly understand with the second solution, I would have to recreate all object during resizing ? Actually the first solution is working great, I learn a lot from you @OSUblake 1 Link to comment Share on other sites More sharing options...
OSUblake Posted February 4, 2022 Share Posted February 4, 2022 2 hours ago, Kirdes said: If I correctly understand with the second solution, I would have to recreate all object during resizing ? No, I would just make your classes so there are easy initialize on resize, kind of like this. class Box { constructor() { this.init(); } init() { // setup } } let box = new Box(); window.addEventListener("resize", () => { box.init(); }); Link to comment Share on other sites More sharing options...
Kirdes Posted February 5, 2022 Author Share Posted February 5, 2022 Okay but can we say that in my case I need to recalculate the square position before update ? if yes, the first solution you gave me is maybe more "performant" ? See the Pen GROqdZx?editors=1010 by kirdesmf (@kirdesmf) on CodePen See the Pen ZEapVMG?editors=0010 by kirdesmf (@kirdesmf) on CodePen Link to comment Share on other sites More sharing options...
OSUblake Posted February 7, 2022 Share Posted February 7, 2022 On 2/4/2022 at 7:19 PM, Kirdes said: Okay but can we say that in my case I need to recalculate the square position before update ? Yes. And like I said earlier, that is usually what I do. I'm not too concerned about how something looks during the resize as the user is probably not going to keep resizing their window. Also for resizing, sometimes I like to fade out and in the animation so it's not too jarring, kind of like this site does. https://kexhotels.com/ 1 Link to comment Share on other sites More sharing options...
Kirdes Posted February 7, 2022 Author Share Posted February 7, 2022 Got it. Thanks for your time. Have a nice day 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now