transitionDuration in v4 not working

I’ve migrated from v3 to v4 on my Svelte app and now, for some reason, transitionDuration stopped working i.e. doesn’t animate my grid anymore when I change screensize. Here’s my code on v4

<script>
  import { onMount } from 'svelte'
  import { MasonryInfiniteGrid } from '@egjs/svelte-infinitegrid'
  import Spinner from '../../components/ui/Spinner.svelte'
  import { stores } from '@sapper/app'
  import { toHSL, sleep } from 'utils'
  import tinycolor from 'tinycolor2'

  const { session } = stores()
  let mountedToDom = false

  let ig
  let loading
  let items = []

  const loadItems = (groupKey, nextKey, itemCount) => {
    const nextItems = []
    for (let i = 0; i < itemCount; ++i) {
      nextItems.push({ groupKey, key: nextKey + i })
    }
    return nextItems
  }

  const onAppend = async ({ detail: { groupKey, startLoading } }) => {
    // if (ig.isProcessing()) {
    //   return
    // }
    // startLoading()
    // await sleep(3000)
    const nextGroupKey = (parseFloat(groupKey) || 0) + 1
    const nextKey = items.length
    items = [...items, ...loadItems(nextGroupKey, nextKey, 10)]
  }

  const onLayoutComplete = ({ detail: { isLayout, endLoading } }) => { !isLayout && endLoading() }

  onMount(() => { mountedToDom = true })
</script>

{#if mountedToDom }
  <div class="my-6 md:my-10">
    <MasonryInfiniteGrid
      gap={10}
      align={"center"}
      isConstantSize={true}
      transitionDuration={0.7}

      {items}
      {loading}
      bind:this={ig}
      let:visibleItems

      groupBy={item => item.groupKey}
      itemBy={item => item.key}

      on:requestAppend={onAppend}
    >

      {#each visibleItems as item, index (item.key)}
          <div class="thumbnail">
            <img src={`https://naver.github.io/egjs-infinitegrid/assets/image/${(item.key % 59) + 1}.jpg`} alt="edm"/>
          </div>
      {/each}
    </MasonryInfiniteGrid>
  </div>
{/if}


<style>
  .item {
    width: 300px;
    opacity: 1;
    border-radius: 0.3rem;
    overflow: hidden;
    border-width: 4px;
  }
  .item .thumbnail {
    max-height: 300px;
    overflow: hidden;
  }
  .item .thumbnail img {
    width: 100%;
    /* border-radius: 0.2rem; */
  }
</style>

Any ideas why it stopped working? Also, in v3 I used options={{ isConstantSize: true, transitionDuration: 0.7 }} but figured that stopped working in v4 so I switched to using options such isConstantSize etc. as shown in the code above. Is that correct in v4?

[daybrush]

@evdama

infinitegrid’s new version 4.1.0 is released. And support transition.

https://naver.github.io/egjs-infinitegrid/Guides#use-transition

[daybrush]

@evdama in v3

// common options
const ig = new eg.InfiniteGrid(".app", {
    isConstantSize: true,
    transitionDuration: 0.2,
});

// layoutOptions
ig.setLayout(eg.InfiniteGrid.GridLayout, {align: "center", margin: 3});
ig.layout(true);

<GridLayout
    options={...}
     layoutOptions={...} />

but in v4

const ig = new InfiniteGrid.MasonryInfiniteGrid(".app", {
    isConstantSize: true,
    align: "center",
    gap: 3,
});

ig.renderItems();

<MasonryInfiniteGrid
    isConstantSize={true}
    align={"center"}
    gap={3}
    />