Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Adding gif component makes GSAP behave weird #609

Open
MMMMMoris opened this issue Jan 17, 2025 · 2 comments
Open

Adding gif component makes GSAP behave weird #609

MMMMMoris opened this issue Jan 17, 2025 · 2 comments

Comments

@MMMMMoris
Copy link

MMMMMoris commented Jan 17, 2025

I am using "gsap": "^3.12.5" with "vue": "^3.5.13"
I am trying to make a doll grabbing machine on web.
There is a hook with 10000px height, most of it is hidden above the viewport of the browser.
When I click, the hook moves down and reach for the dolls at the bottom of the viewport.
Here is the thing. While the hook fetching the doll, I would like to display a gif, with position: absolute style
It is the very moment that the hook suddenly moves out of the viewport !

Image

you can see its translate(22.5566vw, 87.2345vh); prop, which I have never added into.

Here is the code, really simple one.

gsap.to(hookRef.value, {
    y: `72vh`,
    ease: "none",
    duration: 1,
    repeat: 1,
    yoyo: true,
    onComplete: () => {
      store.commit("updateHookStatus", "halt")
    },
    onRepeat: () => {
      if (Math.random() >= 0.3) {
        store.commit("updateGrabbedMascot", true)
      } else {
        store.commit("updateGrabbedMascot", false)
        showCat()
      }
    }
  })

showCat() is the part I use v-if to display a cat gif

Image

The abnormal position of the hook ending up diffs each time.
What is more CONFUSING, there is very small odd that the hook behaves normal.
But just small odd. Mostly it flies out of the viewport.
Things works fine without the cat gif.

@MMMMMoris
Copy link
Author

I will later try to provide a minimal code pack to present the issue I am facing

@jackdoyle
Copy link
Member

Hi @MMMMMoris

Yeah, it's pretty much impossible for us to troubleshoot without a minimal demo. The problem could be in your CSS, a 3rd party library, or any number of other things. You don't have any CSS transitions applied to anything that's being animated with GSAP, do you?

Once we see a minimal demo that clearly illustrates the issue (like a CodePen or Stackblitz), we'd be happy to take a peek. The best place for things like this is in the forums at https://gsap.com/community. Here are some Vue starter templates you could fork: https://stackblitz.com/@gsap-dev/collections/gsap-vue3-starters

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants