Green-Alpha

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 !

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

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

Thank you for this explanation

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 ?

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

@ZachSaucier you right ! my bad

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 ?

@ZachSaucier this mean the number can be grater than 1, right ? Sorry I edited my prev answer to update and show autoRotate problem

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 https://codepen.io/GreenSock/pen/poJNRpx, 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 ? https://codepen.io/Green-Alpha/pen/ExjZEMB

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

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

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

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

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

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.

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>.

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 ?

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

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. https://codepen.io/Green-Alpha/pen/bGdEyGr Thanks again

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

it's fixed now

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.

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

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