Jump to content
Search Community

Kirdes

Members

  • Posts

    14

  • Joined

  • Last visited

 Content Type 

Posts posted by Kirdes

    Canvas animation orchestration

    in GSAP

    Posted

    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

    Canvas animation orchestration

    in GSAP

    Posted

    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

    Canvas animation information

    in GSAP

    Posted

    Hey @OSUblake, first I really appreciate that you take the time to check my codepen.
     

    4 hours ago, OSUblake said:

    I really love your animations! How long have you been messing with canvas?


    😊 Thanks you Blake.

    I had a look a few years ago but without much result, must have been lacking in js. I'm back in the canvas game since 1 week.
    Now that js and I are friends, I understand better how the canvas api works, which is cool I will be less limited in animation.

    I found most of the info on this forum. There are not many good resources about 2D canvas out there.

     

    I think I have understood how to cache an object much clearer now

    • Like 1

    Canvas animation information

    in GSAP

    Posted

    Sorry to disturb again.
    I tried to use an offscreen canvas but I'm sure if its correct. I made a new codepen, I think its "ok" because when I use filter like drop shadow I dont have any performance issue or less. still not sure. And I'm facing an other issue, I cant find a way to animate the alpha with the offscreen canvas.
    Same thing with hsla instead of globalAlpha.

    You can toggle useCacheline 167.

    Thx

    See the Pen bGoQZYE?editors=0010 by kirdesmf (@kirdesmf) on CodePen

    Canvas animation information

    in GSAP

    Posted

    So if I understand correctly, in my case, I cant use the offscreen canvas because I have different shapes ? and tbh I wont go with more than 150 objects so maybe there is no need for an offscreen canvas..I will investigate in PixiJs but it was more to understand the native api.
    Thx for your answers 

    Canvas animation information

    in GSAP

    Posted

    Hello,
    First of all, I'm sorry if this is not totally in line with GSAP but the fact that I found most of the information on this forum make me think that this is the right place to ask.

    So after browsing the forum, I am now more comfortable with canvas and hope to do things right.
    However I'm not sure about some points :

      - Is this the right way to use gsap.ticker on a mouse event? I plan to have a page with several canvas I would put the stackblitz link.  There doesn't seem to be any problem for the moment but I have some doubts

     

      - If i increase the number of objects to 1000, we can see some performance problems. can i improve this ? I tried to use an offscreen canvas but I can't really understand how to animate it and how to set it up, despite having seen some examples on the forum



    Stackblitz: https://stackblitz.com/edit/vitejs-vite-qlxmpw?file=src%2Fstyle.css&terminal=dev

    Codepen: 

    Thx for your time and sorry if this post does not fit the forum 👋

    See the Pen qBPJLbB by kirdesmf (@kirdesmf) on CodePen

×
×
  • Create New...