play() + reverse() together as a single cycle - in React, by user trigger

[Rich - another]

Hi

Reading through a significant amount of API docs and forum posts in the last three full days, I haven't found a solution for a situation where playing animation then reverse it back would happen together as a single unit / cycle.

 

Would you please put me into the right direction how to achieve this?

 

The environment is React (NextJS), and the trigger is a user trigger (swiper in production, but for simplicity it is just a button here).

 

What I am looking for your help please, is that the animation remains paused on page load. And once the user clicks the button,

- all circles

- at the same time

- move and shrink into the center

- then go back to their original positions and original sizes.

The reverse flow is also part of the VERY SAME user triggered animation (NOT a separate / other one).

 

https://codesandbox.io/s/vigilant-waterfall-urfq1?file=/pages/index.js

 

Many thanks

Rich

 

[OSUblake]

Welcome to the forums @Rich - another

 

Before fixing your animation. Let's discuss some problems with what you're currently doing. 

 

First, an animation instance (Tween or Timeline), can only be in 1 place in a timeline, but you have added the tlSlave in multiple places, so the timeline is going to play in the last place you added it. It's similar to appending an element, it can only be one place at time. 

 

If you want something to automatically reverse, you can just set repeat: 1 and yoyo: true on your animation.

 

You shouldn't pause an animation inside a timeline. If you need something paused, just set paused on the timeline.

 

You can't animate size as that is not a property of an element. Size is just some value you are passing into your component. You would have to animate what size actually means in the element, like width and height.

 

When animating transforms, it's best to use what GSAP already provides, x, y, scale, rotation, and xPercent/yPercent for percentage based transforms.

 

Based on your demo, it wasn't clear what the center is supposed be as each circle has a center, and so does the container, so I didn't do that animation. But the easiest way to have something go to the center would be to initially center, then transform it to where you want to be. After that, you would just have to animate x and y to 0.

 

If you need help with that, just let me know, but this should at least give you a good direction of where to take things.

 

https://codesandbox.io/s/sharp-dust-s6ejh?file=/pages/index.js

 

 

[Rich - another]

Many thanks @OSUblake

 

I really appreciate that top on your concrete implementation in codesandbox, you have also provided all the key strategies in general.

 

Based on your example I could manage to work the production version apart from a consistent trigger. The whole animation is embedded into a swiper and triggered by its onSlideChange() function. This function consistently triggers a console.log() but not the GSAP anim. GSAP anim is triggered only by the very first slide. Before I'd provide a codesandbox example I'm enquiring if this is a returning issue with a known answer maybe?

 

Regarding the target position, yes it would be the container's center. I've managed to achieve it with "left/right/transform-translate" animation - based on your example - however, am interested in your solution if it is more efficient please.

 

Thank you

 

[OSUblake]

I'm guessing you are using percentages for everything to make it responsive, so what you did is fine. The only thing I would recommend is to never use transform for you GSAP animations. Use what GSAP provides, like x, y, scale, scaleX, scaleY, rotation, rotationX, rotationY, rotationZ, xPercent, and yPercent.

 

.to(parent(".mosaic"), {
        duration: 1,
        width: 50,
        height: 50,
        xPercent: -50,
        yPercent: -50,
        left: "50%",
        top: "50%"
        // transform: "translate(-50% -50%)"
      });

 

The reason is that GSAP will keeps track of transforms internally to improve performance, and animating the transform property will not allow you to animate more than 1 type of transform at a time. 

 

For example, the scale animation would override the translate animation because it's changing the entire transform property.

// won't animate correctly when scale transform starts
gsap.to(".foo", {
  transform: "translate(500px, 0px)"
});

gsap.to(".foo", {
  transform: "scale(2)",
  delay: 0.2
});

 

This will work without any issues as GSAP knows to merge the translate and scale animation together.

gsap.to(".foo", {
  x: 500
});

gsap.to(".foo", {
  scale: 2,
  delay: 0.2
});

 

Check out the CSSPlugin docs for more information about transforms.

GreenSock | Docs | GSAP | Core Plugins | CSSPlugin

 

[Rich - another]

Many thanks @OSUblake

[Rich - another]

Regarding Swiper, I've just put together another sandbox for illustration, but it has turned out that works perfectly

So there must something be wrong in my production code.

 

https://codesandbox.io/s/immutable-bird-t4ude?file=/components/Swiper.js

 

All the best

[Rich - another]

In my previous comment, I was wrong with the Swiper. The source of the problem is the fade effect. Once fade effect is employed it blocks GSAP. I am not sure where the boundary lies between GSAP and Swiper here.

 

Instead of slide effect I'm looking for a fade effect.

Can you help me please to bridge the gap?

 

component > Swiper.js:

effect="fade"
fadeEffect={{ crossFade: true }}

 

Thank you

[Cassie]

Sorry Rich, I'm afraid I'm not understanding what the question is here.

I'm not familiar with swiper - is it a slider? Are you wanting to build a slider, with fades using GSAP?

[Rich - another]

Hi Cassie

 

Thank you for your assistance.

 

I was looking for the ideal connection between GSAP and Swiper-with-fade.

However, in the meantime, I have managed the integration by relocating the part required fade-effect from Swiper.

For GSAP trigger I use a React useState updated by Swiper.

 

All the best