aaron4osu Posted May 20, 2022 Share Posted May 20, 2022 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. See the Pen GRQEWea by aaron4osu (@aaron4osu) on CodePen Link to comment Share on other sites More sharing options...
PointC Posted May 20, 2022 Share Posted May 20, 2022 Hi @aaron4osu Welcome to the forum. If this project is a bit overwhelming, I'd suggest going to the Learning Center and starting a bit smaller. That being said, you'd want to use a timeline and stagger to achieve the emptying of each bowl. Here's a quick fork showing what I mean. See the Pen 5a996bf1d6d02a00fd9215ea71bab039 by PointC (@PointC) on CodePen Obviously the images are not hitting the target correctly (as you noted). That will mainly be a CSS issue. If you want to use divs like that, you'll need to make some calculations about how far away the middle bowl is and listen for resize events. Another option would be to place all of the elements in an SVG and then everything scales together so you can use hard coded values. If you want the final product to look exactly like the filled bowl, you may want to work backwards and use .from() tweens. Lots of options are possible, but as I mentioned, you may want to start with something a little easier after you've gone through the Learning Center. Happy tweening. 2 Link to comment Share on other sites More sharing options...
PointC Posted May 20, 2022 Share Posted May 20, 2022 Just to clarify. I don't want to discourage you from trying wild and crazy things. Go for it. I've just seen a lot of people try complicated animations right out of the gate and then get frustrated when things don't 'click' and abandon GSAP altogether. We want to encourage everyone in the community to stick with it and we're here to help with any and all GSAP related questions and problems. Happy tweening. 1 Link to comment Share on other sites More sharing options...
aaron4osu Posted May 22, 2022 Author Share Posted May 22, 2022 So I took your advice, I created a slightly simpler version as an SVG and switched from .to() to .from(). See the Pen qBxXbVX?editors=1010 by aaron4osu (@aaron4osu) on CodePen 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 }); Link to comment Share on other sites More sharing options...
PointC Posted May 22, 2022 Share Posted May 22, 2022 Sure, you can start from a central point. For that you'd want to animate the cx/cy attributes of each circle. I just hard coded the values in my fork, but there are other ways to get the correct position too. Here's a fork with that update. See the Pen 524ac72daf0762b035d3f47cccc5d427 by PointC (@PointC) on CodePen A couple other notes. I added all the tweens to a timeline. That way you don't need the delay on any of them and the bowl fade-in will happen after the marbles finish their animation. The opacity tween isn't doing anything here. When you use a from tween, that is saying "hey, animate from this position/opacity to my current position/ opacity". Since the opacity is already 1, from 1 → 1 won't actually show anything. I changed it to from 0 in my fork so you could see the difference. Hopefully that helps. Happy tweening. 2 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now