[How can I change a target value while maintaining the same speed?]

thanks a lot! I'm not using easing so it's a nice solution!

[How can I change a target value while maintaining the same speed?]

Hello all,

 

I've got an animation dropping a div by 200 pixels over 1.5 seconds. However, at some cases the end y position might change (become larger), so I would like to update the y property of the animation but keeping the same speed it was moving before the change. The change can occur at any stage of the animation, beginning, middle or just towards the end of it...

 

How can this be achieved?

 

Thanks!

[How to use staggerTo with offset between elements?]

As I thought, it's working perfect!

[How to use staggerTo with offset between elements?]

Thanks a lot to both of you for the prompt reply! Will try it soon enough

 

I'm in love with GSAP lol

[How to use staggerTo with offset between elements?]

Hello all,

 

I'm trying to move X elements to a specific position, but have a different X for each element.

Please refer to the CodePen. I want to make it look like a card dealing, so the second element should appear next to the first one, the third next to the second etc...

 

I tried to use x as a function, assuming I can multiply the index by the card width and add a margin offset, but index always returns as 0...

 

How can I achieve this with GSAP?

 

Thanks!

See the Pen KNeoeq by trueicecold (@trueicecold) on CodePen

[Animate a DIV to center of screen with translate3d]

ok, just verified this totally works! x Property as well as xPercent

 

Actually I wasn't aware of the matrix method of translating in css at all! Just goes to show how much time GSAP saves

 

Thanks a lot!

[Animate a DIV to center of screen with translate3d]

Thanks Dipscom, 

 

x uses transform? not "left", for that matter? I was under the assumption I need to use css property for this.

And what xPercent stand for?

[Animate a DIV to center of screen with translate3d]

Hello all,

 

if I have a div positioned at 0,0 (translated), and I want to bring it to the center of the screen, let's say X=320.

if I move it with GSAP, the top left corner is calculated towards 320px, meaning it's not fully centered, and what I really need to do is move it to 320-div.width/2 to get the proper results.

 

I've tried using transform-origin but that doesn't seem to help (also, transform-origin is 50% 50% by deault if I'm not mistaken).

I have lots of elements, and the vast majority of them should be move from their center point.

 

Any quick solution for this using GSAP?

 

Attached a codepen to illustrate the problem

 

Thanks!

See the Pen WoJMwq by trueicecold (@trueicecold) on CodePen