Loop over animation with delay

[MayaGans]

Hi! 

 

I want to loop over this animation but I'm struggling a bit. I tried adding -1 but this cut off the end of the animation so I'm thinking I need a pause between loops. Is this possible? Any help appreciated!!!

See the Pen qBZXwzE by mayagans (@mayagans) on CodePen

[Visual-Q]

I'm not sure  I understand what you mean by loop over as I don't see any loops in your pen, did you mean repeat or rewind the animation with a delay in between. In that case you'd want to use a timeline rather than individual tweens and you could use repeatDelay()

 

https://greensock.com/docs/v3/GSAP/Timeline/repeatDelay()

 

 

 

 

[MayaGans]

Thanks! I'm really new, I don't have the code to loop over the animation.... because I don't know how 🥴 but I think that link will help me!

[ZachSaucier]

I think you'd learn a lot from reading my article on animating efficiently.

[MayaGans]

Thanks so much for that article! I read it and updated the code below so now it's animating like I want..... but two things are still fishy.

 

1) the "appear" class doesn't seem to actually be working, and

2) the svgs are moving according the new x and ys but I also want to trigger color changes using 'fill': 'color'  but only some of these seem to be working?  Any help appreciated!!!

 

 

 

For completeness I'm including the two pens that show the states between yoyoing (no blocks are ever purple in the animated pen for exampke)

See the Pen eYZGmqx by mayagans (@mayagans) on CodePen

See the Pen KKzvYjB by mayagans (@mayagans) on CodePen

Edited September 2, 2020 by MayaGans
Adding more links

[ZachSaucier]

Hey MayaGans. I think you'd benefit a lot from using GSAP's timelines and defaults. 

 

57 minutes ago, MayaGans said:

1) the "appear" class doesn't seem to actually be working

I see nothing about an appear class in your demo?

 

58 minutes ago, MayaGans said:

the svgs are moving according the new x and ys but I also want to trigger color changes using 'fill': 'color'  but only some of these seem to be working?

I'm not understanding your goal as the first demo doesn't appear to match the second or third demo... Can you please try to clarify what is wrong?

[MayaGans]

Hi thanks for your response! I think the trouble is I kind of have a lot happening.

 

I was under the impression that timelines are useful for sequential events but I want all of these to happen at the same time. Do you still advise I use a timeline? If so, how do you group events within a timeline so they occur at the same time?

 

I added the bottom two pens to show statically what the svgs should look like prior to any animation [where the first pen is the svg and css specified in the html and css -- this is what it looks like if you take out ALL the gsap code]

 

The second pen is what I'm trying to achieve using js/animation. does that make sense?

 

Essentially, the squares should re-assemble from pen 2 into pen 3. I included these because it's odd that even though the starting point has three purple squares you don't see those at all once the animation is applied, despite having the same html and css. 

 

I have two squares with class appear:

 

```

<rect x="110" y="330" width="100" height="100" fill="none" class="appear" fill-opacity:0 />
<rect x="110" y="440" width="100" height="100" fill="none" class="appear" fill-opacity:0 />

```

 

And the corresponding gsap code doesn't seem to happen (I want the boxes to go from opacity 0 to 1)

 

```

// I want two boxes with the class "appear" to go from an opacity of 0 to 1
gsap.to(".appear", {duration: 3, 'fill-opacity': 1, 'fill': 'var(--teal)', repeat: -1, yoyo: true})

```

 

Anyways thank you for your help!

Edited September 2, 2020 by MayaGans
clarification

[ZachSaucier]

Just now, MayaGans said:

I was under the impression that timelines are useful for sequential events but I want all of these to happen at the same time. Do you still advise I use a timeline? If so, how do you group events within a timeline so they occur at the same time?

Yep! In this case I do. You can use the position parameter.

 

27 minutes ago, MayaGans said:

I want the boxes to go from opacity 0 to 1

Why use fill-opacity? Just use opacity.

[MayaGans]

OMG thank you so much @ZachSaucier This is SO much closer!!!

 

Now I have just one more question - the timeline is working but it looks like the color updates aren't happening gradually over the duration but rather all immediately at the end? Ideally I'd like the colors to fade as the boxes are moving, not change once the boxes move (does that make sense). [I want the boxes to gradually change color as the move left, then gradually change back to grey as they move back to the right]

 

Maybe I need to add a fading ease or something?

 

Thank you SO SO SO much for all your help!

 

Updated pen: 

[ZachSaucier]

You can't really use CSS variables as the end point because it has to be parsed by the CSS. Here's how I'd set it up:

See the Pen WNwZJaE?editors=0010 by GreenSock (@GreenSock) on CodePen

[MayaGans]

OMG YOURE AMAZING! And I learned SO much in the process!! Thank you!!!