Jump to content
Search Community

Canvas animation orchestration

Kirdes test
Moderator Tag

Go to solution Solved by OSUblake,

Recommended Posts

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

  • Solution

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

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

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

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

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/

 

  • Like 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...