Moving shapes animation

[amitr95]

I'm trying to get this animation to work as such:

 

1. .shape-1 moves into top left of view
2. .shape-2 to come from the bottom from the center (50%), then move to the bottom left to whatever the width of .shape-1 is (for example, if .shape-1 is 185px, then .shape-2 will come from the bottom center, and move into left: 185px)

 

However, as you can see in my current demo, .shape-2 moves to the right, then blinks into the center and goes directly down.

 

Am I logically doing something incorrect?

 

Here's a GIF of the animation that I'm trying to emulate (in my instance, the shapes are moving in different directions)

 

See the Pen wvYJmbM by amit_rai95 (@amit_rai95) on CodePen

[mvaneijgen]

Your second shape_2 animations has a position parameter on it that starts -=0.5 seconds of the previous animation, by default animation in GSAP are 0.5 seconds, so your second tween starts at the same time as the first one, both of them tween the same values, so that is not working. 

 

I would also advise to not tween the top, bottom, left, right properties of elements and instead use x, y or xPercent, yPercent.

 

And if I'm taking a good look at your shape_2 in the gif you've shared the element isn't moving the the left and the bottom, but it is rotating on an axis off screen. You can do this by setting a transformOrigin on the tween, I don't have time to find the perfect transformOrigin for you, but the concept you'll need to tween is in the pen below. Hope it helps and happy tweening! 

 

See the Pen ZEqeqed?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

[amitr95]

@mvaneijgen

 

Not sure I follow entirely? I understand the use of transform to curve the .shape-2 in from the right hand side to the left. However, I can't see how I'm able to stop .shape-2 at bottom: 0, left: width of .shape-1?

 

For context, this animation is only meant to play once on scroll (hence the ScrollTrigger). I'm just looping the animation just so it's in a working state. 

 

Point being shape-2 should curve from right side (say left: 60%) pause in the middle for a second, then fall into place at bottom: 0, left: width of .shape-1 (which is why I initially had left: `+=${shape1Width}`)

 

Does that make sense? 

 

 

[mvaneijgen]

11 hours ago, amitr95 said:

However, I can't see how I'm able to stop .shape-2 at bottom: 0, left: width of .shape-1?

 

I've read this a few times, but I'm not clear what your question is. 

 

I've made a screenshot of your gif to what I think the animation should be. Right now in your animation you move it the left and bottom, this will move in a straight line, see the red line in my screenshot. But in your gif it looks like it is moving in an arc, see the blue line. Getting things to move in an arc is easy to do when you move the transformfOrigin of the element to the end of the pink line.

 

 

 

 

I've taken a look again at your original demo with  "-=0.5" // offset the start of this animation by 0.5s And I think you want +=0.5 then it will play 0.5 second later and it has a small pause between the tweens. 

 

Just a side note: I personally find it always easier to have my elements at there end position (where they need to be when the animation is done), then you'll only need .from() animations and getting them lined up will be much easier. The best way to go about this is to remove GSAP for now get the elements in place with CSS and then start animating backwards. Hope it helps and happy tweening! 

 

See the Pen ZEqeqed by mvaneijgen (@mvaneijgen) on CodePen

[amitr95]

Hi @mvaneijgen,

 

The curve is definitely a nice addition so not adverse to transformOrigin, but was just querying how the property would work in conjunction with my positioning requirements.

 

In my original query, I mentioned the shapes the shapes movement will differ to the GIF - "in my instance, the shapes are moving in different directions". For example, in the GIF, the eventual circle comes from the right then finishes on the left, whereas I'm trying to make it come from the right and make it sit on the left.

 

Below, I've attached a visual cue of the end result and direction of movement. 

 

You'll also see what I mean by the circle sitting to the left of .shape-1 when the animation is over.

 

My latest demo using transform is also below. I think the beginning of my issues stem from this: { right: "100%", bottom: "-185px" },

As the circle needs to come from the right. But when it's set to left, it doesn't come into view.

 

In relation to your side note, are you saying to position the three shapes where they need to end up using CSS?

 

See the Pen wvYJmbM?editors=1010 by amit_rai95 (@amit_rai95) on CodePen

 

[amitr95]

I've tried to come back to this with a fresh brain, but can't see why my shape_2 is not sitting left:-185px in the demo below.

 

shape1Width is 185px. The idea is that shape_2's end position will be left: 185px;

 

However, in my demo it's sitting far from that. A console.log(shape1Width) shows the correct value. I assumed it is because I'm setting it's initial left value to "50%" and then tried:

 

shapeTL.fromTo(
  shape_2,
  { left: `${shape_1.offsetLeft + shape1Width}px`, bottom: "-185px" },
  { left: `${shape_1.offsetLeft + shape1Width}px`, bottom: "50%", borderRadius: "50%" }
)

 

But this just made the animation start on the left hand side and animate off screen.

 

See the Pen wvYJmbM?editors=1010 by amit_rai95 (@amit_rai95) on CodePen

[Rodrigo]

Hi,

 

I'm not sure I follow what you're trying to do, but right now in your codepen example you have a relative value:

shapeTL.to(
  shape_2,
  { left: `-=${shape1Width}`, bottom: "0" },
  "+=1" // offset
);

That is subtracting 185 pixels (the width of shape 1) from the current left position shape 2 has. If you want the element to have a left position of 185 pixels, use an absolute value:

shapeTL.to(
  shape_2,
  { left: `${shape1Width}`, bottom: "0" },
  "+=1" // offset
);

Hopefully this helps.

Happy Tweening!