What can I do to fix the jerky movement of my swipe animation with Vue 3 and Hammer.js?

Question

I have been trying to achieve this effect for days and I just don't understand what I might be doing wrong or what is coming into play when I do this type of animation. All I want is to detect a click or a touchevent from a mobile and have the box move up or down. I have looked up an example project and literally copied what it does, however, my box does not move right, it moves in jumps and incorrectly not smoothly at all.

This is my Vue component:

<script lang="ts">
import Hammer from 'hammerjs';
import Vue from 'vue';

export default {
    data() {
        return {
            offset: 0,
            threshold: 0,
            isDragging: false,
        };
    },
    mounted() {
        this.setupHammer();
    },
    methods: {
        setupHammer() {
            const hammertime = new Hammer.Manager(this.$refs.post);

            hammertime.add(
                new Hammer.Pan({
                    threshold: this.threshold,
                    pointers: 0,
                    direction: Hammer.DIRECTION_VERTICAL,
                })
            );

            hammertime.on('pan', (event) => {
                this.offset = event.deltaY / this.$refs.post.clientHeight;
                console.log(this.offset);
            });

            hammertime.on('panstart', (event) => {
                this.isDragging =
                    event.offsetDirection === Hammer.DIRECTION_DOWN ||
                    event.offsetDirection === Hammer.DIRECTION_UP;
            });

            hammertime.on('panend', (event) => {
                this.isDragging = false;

                if (event.deltaY > 200 || event.velocityY > 0.4) {
                    this.offset = 1;
                } else {
                    this.offset = 0;
                }
            });
        },
    },
};
</script>

<template>
    <div
            class="uppBox scrollableUppbox uppBox--pink post"
            ref="post"
            :style="{ transform: `translate3d(0, ${offset * 100}%, 0)` }"
    >
        <div class="post__iconBox">
            <i class="material-icons">pause</i>
        </div>
        <div class="post__authorData">
            <div>photo</div>
            <h1>ExampleUser</h1>
        </div>
        <div class="post__content">
            Content
        </div>
    </div>
</template>

This is the post CSS (the other ones are only colors and shadows)

.post
  position: relative
  flex-direction: column
  font-family: Inter, "Inter Semi Bold", sans-serif
  font-weight: 400
  padding: .5em 1.2em
  height: 100%
  transition: 0.3s ease-in-out 

This is the behaviour of my box:

https://imgur.com/vF85N1L

And this is the smoothness I want (from the component bottomCard of this project https://github.com/scriptcoded/vue-3-card-swiper/tree/main):

https://imgur.com/CQHQvDS

I tried to change transform: translate3d(0, ${offset * 100}%, 0) to only translateY(offset), but same happens. I tried to change the offset variable to setup or tried to calculate the offset directly, but it is still not smooth.