Jump to content
Search Community

GSAP plus CSS Bounce animation simultaneously

Tee test
Moderator Tag

Recommended Posts

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)
  }
}
 
Link to comment
Share on other sites

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
});

 

  • Thanks 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...