GSAP plus CSS Bounce animation simultaneously

[Tee]

So I have a simple GSAP timeline to move an element with the direction of the mouse' event:

 

node.addEventListener("mousemove", e => {
    const x = e.clientX / 10;
    const y = e.clientY / 10;

    gsap.timeline()
        .to(blurRef.current,  {
            yPercent: -30,
            x,
            y,
            duration: 1
        }, 0)
})

 

It works fine, but I want to add an infinite bounce effect which happens simultaneous to the mouse animation. 

 

I've done the bounce effect only before with pure css, but this makes GSAP stop working (mouse effect won't work). 

Is there a way to handle both simultaneously? Is there an equivalent for the CSS with GSAP?

 

.blur {
  animation: bounce 2s infinite ease-in-out;
}

@keyframes bounce {
  0% {
    transform: translateY(-10px)
  }
  50% {
    transform: translateY(15px)
  }
  100% {
    transform: translateY(-10px)
  }
}

 

[ZachSaucier]

Hey Tee. 

 

First off, I recommend that you modify your mousemove function. The one that you have could be improved like so:

node.addEventListener("mousemove", e => {
  const x = e.clientX / 10;
  const y = e.clientY / 10;

  gsap.to(blurRef.current,  {
    yPercent: -30,
    x,
    y,
    duration: 1,
    overwrite: "auto" // very important
  })
})

However you could go even further improving the performance using GSAP's .quickSetter() which is what I would do in your position.

 

When combining animations that are animating the same properties of the same objects, it's usually best to animate a container of the element with one animation and the actual element with the other element. That way you don't have to worry about managing the combination of the animations, it just works because the animations are on different elements. So I would recommend adding a new container just around your blur element and animating that with one of your two animations.

 

In terms of writing that CSS animation in GSAP, here you go:

gsap.fromTo(blurRefContainer.current, { y: -10 }, {
  y: 15,
  repeat: -1,
  yoyo: true
  ease: "power1.inOut",
  duration: 1
});