Unwanted hover effects

[MooseSaeed]

Describe the bug I'm creating a normal translate effect that should move my imgs when scrolling. However whenever I hover over the container the translate effect start running while it still works when scrolling but why is there anything happening on hover?

To Reproduce Steps to reproduce the behavior:

<template>
    <div class="max-w-[40%]">
        <kinesis-container
            event="scroll"
            class="flex flex-row items-center justify-center self-center justify-self-center"
        >
            <kinesis-element class="self-start" :originY="60" :strength="120">
                <img src="/images/iblog.png" alt="" />
            </kinesis-element>

            <div><img src="/images/isaidcodenoi.png" alt="" /></div>

            <kinesis-element
                class="self-end"
                type="translate"
                :originY="60"
                :strength="120"
            >
                <img src="/images/exblog.png" alt="" />
            </kinesis-element>
        </kinesis-container>
    </div>
</template>

Expected behavior Nothing should be happening unless I scroll. but the issue is that when i hover over the container things starts to move

Screenshots Here's a gif to show that effects activated on hover while it should be only on scroll

[amineyrman]

Thanks for letting me know about this. I'll give it a look and come back to you.

[MooseSaeed]

So i noticed that when i increase the strength for some reason whenever page is refreshed the items places changes as well, as you can see in the above gif. What I initially want is for the "i" and "!" to be in their place but they go down while scrolling but instead they start in different place and when I hover or scroll they move to their original place and then they do what i want.

[MooseSaeed]

@Aminerman I tried to figure it out but I can't find the spot where this is going wrong. for some reason changing strength is changing the position of the item even before anything takes effect.

[Just-Timo]

@Aminerman i have the same issue with the scroll-animation on page load. It initializes with for example translate3d(0px, -100px, 0px) and directly changes to something like translate3d(0px, 49.7528px, 0px) when i scroll 1 pixel.

This looks terrible, when having the parallax effect on a hero-element as a first section on the page.

Please Help!

[MooseSaeed]

@aminerman Any updates?