aaron4osu

Thanks Cassie! That works perfectly... I'm trying to fine tune the traditions between them to slow it down so each one is green for about 1 second and the tradition between them is a bit slower and maybe fades in out between them... I tried adding ease and duration to the stager... and also played with the duration in the main function but not sure which controls the transition? https://codepen.io/aaron4osu/pen/oNqMbjO

I'm trying to figure out how to continuously loop through 5 groups (steps) and changing the the fill color for the spoon, bowl and title one step at a time. For example, step 1 (title, bowl and spoon) would start green, then turn black and step 2 would turn green and so on... Not really sure where to start on this. Also one issue is that the svg code is a little wonky and not nested properly so some of the stages need different css (see below). Some use the path and others do not. I have Gsap installed in this codepen. Any help would be greatly appreciated /* step 1 */ #spoon1 path{ fill:#85ba3a; } #title1 path{ fill:#85ba3a; } #bowl1{ fill:#85ba3a; } /* step 2 */ #spoon2{ fill:#000; } #title2 path{ fill:#000; } #bowl2 path{ fill:#000; } /* step 3 */ #spoon3{ fill:#000; } #title3 path{ fill:#000; } #bowl3 path{ fill:#000; } /* step 4 */ #spoon4 path{ fill:#000; } #title4 path{ fill:#000; } #bowl4{ fill:#000; } /* step 5 */ #spoon5{ fill:#000; } #title5 path{ fill:#000; } #bowl5 path{ fill:#000; }

So I took your advice, I created a slightly simpler version as an SVG and switched from .to() to .from(). https://codepen.io/aaron4osu/pen/qBxXbVX?editors=1010 when choosing the starting point with .from, rather than identify an x and y coordinate relative to the SVG, can I start all of the marbles from the center of one of the groups inside the SVG by ID? For example, all of the green colored marbles would begin from the center of the #greenDish element and go to their final spot. For example #greenDish gsap.from(".greenMarbless", { opacity: 1, y: -300, x:-400, // center of #greenDish duration: 2.5, ease:"power3.out", stagger: 0.5 });

This is my first try at GSAP... so far seems awesome, but also a bit overwhelming... I'm trying to create the effect of filling a bowl full of marbles from multiple smaller bowls of marbles. So far I created a very simple codepen with 4 bowls of marbles (green, blue, red, purple), two on each side of an empty bowl... each of the 4 marble sections has an image full of a bowl of marbles with 3 marble images positioned absolutely over the image of the bowl of marbles. When the animation starts all the individual marble images slide over the empty bowl. What I'm trying to figure out is how to make it so that one colored bowl at a time, a bunch of the marbles slide onto a section of the empty bowl. After 30 or 40 marbles from the first colored bowl (blue) finish, then 30 to 40 marbles slide over from the next bowl and so on... Ideally, when the animation finishes, it would look like the image on the bottom of the code pen with the full bowl... Even better when the animation is finished the center bowl area will be replaced with the image of the finished bowl via a fade out/in. Any help would be greatly appreciated note: on issue of the main issues is the absolute positioning I used doesn't work on responsive so not if there is a way to dine an area (the empty bowl) so the marbles always no where to go.