JarethB

Hi @PointC, Thanks a lot for this. I have successfully used the "_short" which has solved the issue! @OSUblake, That's a great option, I've switched it to rad, thanks! Also, yeah, I have the Y direction backwards atm, meaning to fix that at some point. Take it easy, and here's my revised code: setInterval(() => { TweenMax.to(e, 1.5, { directionalRotation: (Math.atan2(targetTimeScaleX(), -targetTimeScaleY()))+"_rad_short" }); },30) Jareth

Hi, I have an X speed and a Y speed. I use Math.atan2() to calulate the angle from them, and use it to tween rotation. The following code is what I use to continually update the rotation: setInterval(() => { TweenMax.to(e, 1.5, { rotation: (Math.atan2(targetTimeScaleX(), -targetTimeScaleY()) / Math.PI * 180) }); },30) where e is an <image> inside an SVG tag. My issue is rotating from 179deg to -180 deg, for example, rotates backwards 359deg rather than forward 1deg. Is there something I am doing wrong here? Thanks in advanced. Jareth

@PointC it's okay. Just make sure we travel forward in time, not back! @Carl I have set the progress to 50%, and it seems to be working well. An issue is that at timeline near 0 it looks a bit funky, but hopefully the users won't be going full speed ahead in the same direction for > 40 years!! Thanks for your help!

Hi Carl, thanks for your reply. I have attempted to cut down the code, please take another look at the codepen. Notice that within say.. 10 seconds, all the white points stop tweening (I believe they're at y=0/viewport height). I wish for them to loop (from top to bottom in this demonstration) infinately. The use of timescale allows a really nice effect of speed and direction. This other post you have shared looks interesting. I'm unsure if it's useful to this situation at the moment but I'll look into it. Thanks Jareth

Hello again, I'm back with another issue I'm facing. I am aiming to have a background that moves to give the impression of the sprite movement (essentially moving the viewport but not). To achieve this I have made repeating Tweens which move from one side of the page to the other and put them into timelines for X and Y. To get a feeling of speed I have been messing with the TimelineMax timeScale. The issue I have found is that going up (-ve timeScale) soon results in the timeline reaching progess = 0. This is likely to be an issue travelling left also. I have had a look at a similar topic here: however this has not worked well for me. I believe this is because I am not calling reverse(), rather I'm using negative timeScale. Does anyone know a fix for this that will work well, and is there a better way I should be doing this which would make it easier to repeat etc..? Thanks for your help Jareth

Hi @OSUblake This is great! Thanks a lot for your help!

Hi @OSUblake Thanks for your reply. Ideally I'd like it to rotate on the cockpit area of the ship and be centered in the middle of the parent svg. Thanks

Greetings GSAP community, I'm having some trouble getting an SVG origin to center. Please see the Codepen, there is not much else to explain. Thanks in advance for any help. ~Jareth