Possible bug with auto-fit?

Saola Animate Support Questions
1

Problem: The auto-fit feature doesn’t seem to work perfectly

Saola Animate version: 2.7.1

OS: Windows

Notes:

So, I just made a test animation and tried to integrate it with my website. It looks all good and works fine and all, however, I just noticed a problem with the ‘auto-fit’ feature.

Here’s a screen-recording:

As you can see, the size (and position) is normal on initial page load. So, I went ahead to check the responsiveness of the webpage using Chrome’s device toolbar. I switched to smartphone breakpoint (320px). It still worked fine. Then, I snapped out of the responsive testing and noticed that the animation had shrunk. It wasn’t the same size as before.

To my even more surprise, if I jump from 320px to 1440px breakpoint and then snap out of the responsive testing, the animation is back at its original size.

Can you please let me know what’s going wrong and if this is expected behaviour? Is it something on my end that’s causing the issue?

Here’s my website: https://v2--hrishikeshk.netlify.app/index.html
It’s open source, available here: https://github.com/Hrishikesh-K/Portfolio/tree/v2

Please note:

  1. The website is built with Hugo. So, if you want to test it locally, you’d need to have Hugo installed and configured to run from command-line.

  2. If you want to check the source code, the file that you’d want to check in this context is /layouts/index.html. I have commented all the lines of the HTML as well as the custom written JavaScript code.

  3. The custom styling for the website can be found at /assets/css/styles.css. The one responsible for the home page exist from line 134.

  4. The exported animation files from Saola Animate exist in /static/animation-res/.

  5. My Saola Animate animation lies in the /animation/ folder of my repository.

2

Hi,

An auto-fit animation will layout itself when the browser window is resized.
But I see that you also update the container size in placeAnimation. When this function is called, the animation is already laid out so you need to layout it again in your function:

function placeAnimation() {
  /*
    Your original code
  */
  // layout animation
  var docSaola = AtomiSaola.topDocs[0];
  if (docSaola)
    docSaola.layoutIfNeeded();
}

Regards

1 Like
3

That does the trick. Thanks a lot!