MayaGans

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

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: https://codepen.io/mayagans/pen/qBZXwzE

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!

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!!! https://codepen.io/mayagans/pen/qBZXwzE 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) https://codepen.io/mayagans/pen/eYZGmqx https://codepen.io/mayagans/pen/KKzvYjB

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!

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!!!