registerEffect with multiple targets?

[Jess.Park]

Hi. I came back with another registerEffect question 😕

I want to make a simpler way to swap between two divs like below, with registerEffect.

gsap.timeline().change([A, B]) // or .change(A, B)

 

I thought it's going to work fine with targets[0] and targets[1], but it doesn't.

I wish registerEffect provide some ways to do things with custom argument.

Is there a way to do this?

 

See the Pen oNYxzgR by impetusjj (@impetusjj) on CodePen

[akapowl]

 

Hey @Jess.Park

 

Depending on how you set things up, it does work quite well.

 

I stored your effect in a variable, and on click trigger it to play/reverse depending on its reversed state here

 

See the Pen 7ed1b6632d28b450466197a9275c34e5 by akapowl (@akapowl) on CodePen

[ZachSaucier]

What do you think is not working? It seems to be doing exactly what you're telling it to do. Perhaps if you described your end goal more clearly we could help you get there.

[Jess.Park]

18 minutes ago, akapowl said:

 

Hey @Jess.Park

 

Depending on how you set things up, it does work quite well.

 

I stored your effect in a variable, and on click trigger it to play/reverse depending on its reversed state here

 

 

 

 

 

That's weird... I see that you're edit version works fine, but then why my codepen isn't working as expected?

I set timeline to repeat: 3, so it should do instant change between those two, 3 times.

Instead, it doesn't even do once. Let me upload my screen capture. 

 

 

 

 

 

[mikel]

Hey @Jess.Park

 

try a duration more than 0.

 

Is that what you expect?

 

Happy tweening ...

Mikel

[Jess.Park]

17 minutes ago, mikel said:

Hey @Jess.Park

 

try a duration more than 0.

 

Is that what you expect?

 

Happy tweening ...

Mikel

 

 

You're right about duration. 

If I change duration more than 0, it works. If duration is 0, it doesn't work. Is this supposed to happen?

 

I used fromTo because I have to make sure it starts with certain opacity. But maybe I should just use .set for duration: 0 stuff.

I don't like the code, but maybe I should just do this for now.

  gsap.registerEffect({
    name: "swap",
    effect: targets => {

      let tl = gsap.timeline()
      
      tl.set(targets[0], { opacity: 1 })
        .set(targets[1], { opacity: 0 })
        .addLabel("now")
        .set(targets[0], { opacity: 0 }, "now")
        .set(targets[1], { opacity: 1 }, "now")
      
      return tl
    },
    extendTimeline: true,
  })

 

[akapowl]

 

This is the way I see it:

If your duration is set to 0 and you have no repeatDelay (so basically a repeatDelay of 0) it will always go to that last state where the h2 has an opacity of 1 in zero time. So the changes are being made, but you just don't see them, because the duration in which the changes take place is 0.

 

So you will have to work around this logic-problem.

For example, changing  your duration to something very small like 0.001, adding a repeatDelay and a yoyo will make those changes visible

 

See the Pen fbb4f763d4f8e7bcfac92cbeb6c1ca59 by akapowl (@akapowl) on CodePen

 

 

Edit:

Here is another variation using .set() and an empty tween ensuring to include the right amount of waitTime at the end of the timeline.

 

See the Pen f9f2d3c1d2f2dfa36d70ffcabaf279a7 by akapowl (@akapowl) on CodePen

 

 

Maybe someone else has a more profound way of doing it.