[Repeat Until]

Thanks for these answers

 

Interesting solution GreenSock, so in this case if I'm right, the heartbeat become a parallel animation, i'll give it a try !

For the second pen of Mikel, it's close to what I'm trying to do, but in your example the "time" animation is 5s, but the pulse overflow the "time". But I need to stop the pulse animation when the first timeline is complete.

 

Thank you for your time !

[Repeat Until]

Hello, is there a way to make a tween repeat for a duration ? I saw another topic but the goal was not exactly the same.

A simple example : I have a 1 minute animation, and while it's playing, an heart is beating every 750ms. To make the heart beat as long as the animation run, I have to specify the repeat by making some calculations.

Is there a way to avoid adjusting repeat every time I add tweens to the main animation ? Like a tricky way like a property {
repeatUntil : 'someLabel'
}

It's possible to set a repeat to -1 and then stop it using a callback, but maybe you have another way to achieve this ?

Thanks

[Timeline playhead position]

Okay, now I have all informations, thanks for your fast and clear replies

[Timeline playhead position]

Thank you for this explanation

[Timeline playhead position]

Thank you for your answer, i'll use multiple timelines, in any way it's more clear.

 

@OSUblake OK for the "paused" state, but I don't understand because after the timeline is created and an instruction is added, the animation start instantly, so with many instructions the animation will start before all instructions are registered, no ? And what if the last instruction's position is set to 0, like for repeating elements or other timeline ?

[Timeline playhead position]

Hello,

 

On the pen, you can see a simple timeline and then 3 other timelines. I have to animate 2 elements with specific duration and play them at same time.

 

When i set "0" for position on the "b", the next instruction is added after all "a" instructions. I think it's because when you specify a time the playhead is not affected, but i was surprised. I found the > but i have to add it on each element or create timelines. It's not really a problem but maybe i missed something to make it easier ?

 

I didn't tested, but can we make many nested levels ?

 

Thanks

See the Pen PoqJLWa by Green-Alpha (@Green-Alpha) on CodePen

[Invalid position]

@ZachSaucier you right ! my bad

[Invalid position]

I'm facing a really weird behavior. On my final code the rotation is done but in a weird way (the left char rotation is 0deg, and other chars rotation is reversed), and on the pen it's fine. I'll investigate thank you for your anwser Maybe write in the doc that the number can be greater than 1 ?

[Invalid position]

@ZachSaucier this mean the number can be grater than 1, right ?

 

Sorry I edited my prev answer to update and show autoRotate problem

[Invalid position]

Hi again,

I'm not able to find a way to change the start and end angles to start "top" instead of "right". Only solution for now is to do a rotation on the container, is this the only way ? When I set the "start" value to 0.5 on the pen

See the Pen poJNRpx by GreenSock (@GreenSock) on CodePen

, there is no difference.

 

When I set autoRotate to true, the rotation is not done on the element on the left, what I am missing ?

See the Pen ExjZEMB by Green-Alpha (@Green-Alpha) on CodePen

[Invalid position]

Thank you for all your answers, my problem is now fixed and u found the reason why, it is logical but I missed it

[Invalid position]

Is there a topic or anything to know when the 3.2 or next versions will be released ?

[Invalid position]

@GreenSock i agree for the scale but there is not ^^ and i can't find any reason

[Invalid position]

I forgot the pointer-events so i'll use it ty

[Invalid position]

I can use both when needed, but my first concern was to understand why the positions are invalid.

[Invalid position]

Let me explain the reason why i don't use <svg> in many cases : when creating an svg it's impossible to click element behind, but with <div> it's possible to have each element separated.

 

 

[Invalid position]

Thank you for this answer !

 

I use gsap for a while but there are so many features...I think ive read and assimilated 50% of the doc only ! I already tested the motionpathplugin but he don't fit my needs, even if he perfectly fit in this codepen.

 

I created basic example on codepen but on my code I have advanced positioning, in this example it's middle, but it can be middle+50, middle-50, inside, inside+50, outside...plus, there is no <circle> i want it to be virtual and the <svg> can be a basic <div>.

[Invalid position]

Hi,

 

I have a positioning problem and i go crazy because i don't understand why.

 

On the pen, you can see items placed on a circle. When i put a basic shape like circle, positions are ok, but when I put a <path>, these paths are not at the expected position.

 

Do you have any idea ?

See the Pen oNXYYNM by Green-Alpha (@Green-Alpha) on CodePen

[Angle to coordinates]

I dunno why but my answer was not saved. Thank for the tip i dunno why i didn't think about it

[Angle to coordinates]

Thank you for this reply

 

MathIsFun.com is a very good name ! In my case I was doing bubbles while math hours...and now I'm unable to do simple things like this.

 

In your pen you compute the angle, but in my case I want to get the green box position by specifying an angle.

 

The final goal is to have a rocket starting from the red box like rocket.throw(48) where 48 is the angle.

 

In this pen, the green box define the area where the rocket will explode.

 

 

Thanks again

[Angle to coordinates]

Hi,

 

I try to get coordinates for a given angle.

 

I mean i have start X/Y (in this pen 50%/100%) and a end (in this pen 0%/0%) and a fixed viewport width/height.

 

If i do it "with eyes", the angle will be approx -45 degrees. How to get the angle for the final position (the green box)  ?

 

Probably you will better understand with the code :
 

angle = 79; // Angle from the center of the red box
vw = 1280; // Viewport width/height
vh = 720;
minX = 50; // Bounds
minY = 30;
maxX = vw - 50;
maxY = vh - 30;

// I have a rectangle, an angle, a virtual boundary box, so what are the coordinates ?
coords = ?

 

I was in the way to do it by creating a virtual circle and then get angle then position for this angle by specifying size and use of PI, but it's a circle with and i expect a rectangular position.

 

I hope you understand what i mean...

 

Thank you

 

See the Pen bGdEyGr by Green-Alpha (@Green-Alpha) on CodePen

[Physics2D docs demo is broken]

it's fixed now

[Physics2D docs demo is broken]

Hello,

 

This example does not work : https://greensock.com/docs/v3/Plugins/Physics2DPlugin

Animation start then stop, and after this it's impossible to drag the timeline.

[MorphSVG not working as expected]

I read a lot of the documentation but didn't read the entire morphsvg doc because it's really complex language and even with a translator it's hard to understand deeply what the doc say Especially this part it's technical ! It's hard to be french ^^

 

I discover new things every day because this engine is really big with many features and this one is very nice.

 

You rock ! Thanks

[MorphSVG not working as expected]

Hi,

 

On the codepen you can see a lion that i want to morph using morhsvgplugin but when the transformation starts, the eye switch witch the nose...any idea to fix this ? is it possible to fix this ? If not, any idea to achieve it ?

 

Thanks

See the Pen OJVPQpd by Green-Alpha (@Green-Alpha) on CodePen