Jump to content
Search Community

how to scale/rotate while keeping the same distance of svgOrigin

dadamssg test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

This is my first time with animation so bear with me...

 

I have this sun svg that i'm trying to animate the rays. I'd like the rays to grow/shrink(think pulse) while rotating around the sun. If i use scale on the rays to manipulate their size they overlap the sun. I'd like for each of the rays' center coordinates to be centered on an invisible larger circle so they don't overlap the sun. This way there will always be a gap between the rays and the sun. Hopefully that makes sense...

 

Maybe scale isn't the right thing to use here? Might've picked something a little too complex for my first exercise  :s

See the Pen pGgPgP by dadamssg (@dadamssg) on CodePen

Link to comment
Share on other sites

Hi @dadamssg,

 

Welcome to the GreenSock Forum.

 

To achieve this, transformOrigin offers a solution. You can specify an individual value for each ray to make the rays smaller towards the middle. If you can calculate this values.

 

I chose "center" - the easy way, it's the same for everyone. With transformOrigin for the rays, then the entire svg must be rotated. Otherwise there is chaos ...

 

See the Pen QYyVwP by mikeK (@mikeK) on CodePen

 

Happy sunshine ...

Mikel

 

 

  • Like 1
Link to comment
Share on other sites

Hi @dadamssg,

 

"With transformOrigin for the rays, then the entire svg must be rotated. Otherwise there is chaos ..."

But if you set transformOrigin:"center" for the grouped rays also, the rotation of all rays is perfect.

 

See the Pen BMjvEB by mikeK (@mikeK) on CodePen

 

Here's an article @GreenSock wrote about transform origin in SVG: https://css-tricks.com/svg-animation-on-css-transforms/

 

Use GASP and have the chaos under control ...

Mikel

 

 

  • Like 3
Link to comment
Share on other sites

  • 1 year later...

hello I'm also working on a motion start + stop and autorotate

but the horse is to far from the line..

how to set in the points to rotate correctly?

thanks to help me

this is where i started from 

See the Pen cfa058308e8d9e103cd2e3ad8ff1fb64 by snorkltv (@snorkltv) on CodePen

 

my pen: 

See the Pen dyoeQQb by karelrosseel-prive (@karelrosseel-prive) on CodePen

 

this is what I found: a beautifull flight in 3D.. but how does it works: turning stays at the line..??
 https://greensock.com/forums/topic/14470-cant-figure-out-bezierplugin-and-autorotate/ 

 

thanks to help me

 

Link to comment
Share on other sites

Hey karel and welcome to the GreenSock forums! 

 

12 hours ago, karelrosseel82 said:

my pen

You should use your developer tools console to fix the error that appear. You can open up the console by pressing F12. It will show you a bunch of error like 404 for files that can't be loaded, some invalid syntax, an element being null that you're trying to attach an event listener to, and other errors. Please try and fix those in the demo so that we can focus on the error(s) that you're asking about in the question itself. We can't fix all of the errors for you because it's not clear exactly what you're wanting and we don't have the capacity to fix all the errors.

Link to comment
Share on other sites

  • 3 weeks later...

hello Zach I want to show me my idea: https://karelrosseel.github.io/rossebuurten4kids/

This online github is working but not in codepen.io .. strange: online link: http://4kids.rossebuurten.be 

The horse need to flip on the corners of the streets (otherwise the horse is running backwards)

+ the horse may not start directly

+ I need 6 horses separtely running over the street.. while clicking on the balls the horse get a point extra..

for example 'the game' : step forward if they have a correct answer.. 

 

 

You can see my files online

image.thumb.png.a63ebec97b3318e753ac7108e7319d1b.png

+ What about GSAP 3.2 : can I better use this: 

 

image.png.158389317fa3392c1dc2bbf77c6bab4f.png

Link to comment
Share on other sites

Hey @karelrosseel82. There was a very similar thread not too long ago but I can't find it for some reason. 

 

Anyway, if you want the horses to flip programmatically I came up with a clever way of doing so by detecting if the object is going towards the left of the screen or towards the right. You can make the check in the motion path tween's onUpdate. This only works in the case where the whole object isn't transformed significantly, meaning like rotated 90 degrees or something :) Here's a more simple demo showing the approach:

See the Pen xxGeYNj?editors=0010 by GreenSock (@GreenSock) on CodePen

 

7 hours ago, karelrosseel82 said:

+ the horse may not start directly

Adding a delay to the tween(s) is a good way to do that.

 

7 hours ago, karelrosseel82 said:

+ I need 6 horses separtely running over the street

No problem! Just make more tweens.

 

7 hours ago, karelrosseel82 said:

while clicking on the balls the horse get a point extra

Seems like that's outside of GSAP.

 

7 hours ago, karelrosseel82 said:

'the game' : step forward if they have a correct answer

There are a couple ways of doing that. One is to keep the tween paused but animate its progress. You'd have to do the calculations yourself but it should be straightforward. Something like this should work (though this is pseudo-code, don't expect it to work if you just throw it into your page):

gsap.to(tween, {progress: currentStep / totalSteps});

 

  • Like 1
Link to comment
Share on other sites

Here's one other way to approach the flipping of the car: 

See the Pen ExjJOWp?editors=0010 by GreenSock (@GreenSock) on CodePen

 

We apply autoRotate: true and then in an onUpdate, we get the current rotation and if it's within a certain threshold, we invert the scaleY. I even snuck in some helpful utility functions in there ;)

 

Happy tweening!

  • Like 4
Link to comment
Share on other sites

Thanks @mikel for this example

I tried to make it for me working

See the Pen vYOqGvr by karelrosseel-prive (@karelrosseel-prive) on CodePen

but problem is the start.. the horses are flipped already

image.thumb.png.8550b8c8dc7c72b65020753b33e04f3c.png

+ my animation of a running horse is made by photopea.com(export 3x .png) and animated to apng/gif as running.png made by  https://ezgif.com/apng-maker 

image.png.26c73841a77cf1b0831ed46a106f6370.png

+ can the speed be 'random' and a shuffle for the winner => the way GSAP 3.1 works 

 

image.png.34fa692b089a7fb1379012937ba86f60.png

the shuffle isn't necessery I think.. or is it.. 

image.png.efe870c9a79b0a63aa7f96a6e23aac60.png

 

blauw1.png

blauw2.png

blauw3.png

paard loopt.png

Link to comment
Share on other sites

Hey @karelrosseel82,

 

A lot questions. Let me start with a few answers.

 

the horses are flipped already: Please study the code. As with the turns, you can set the direction of the horses at the beginning.

 

function theHorses(which, dur, ease) {
  var action = gsap.timeline()
  .set(which, { scaleY: -0.5})
 

Why are these IDs for?: Its up to you to use. 

 

GIF: of course

 

See the Pen JjdQyWq by mikeK (@mikeK) on CodePen

 

But you can use a simple sprite animation  

See the Pen MYdwRP by MAW (@MAW) on CodePen

instead.

 

Random: There are lot of options, e.g.

 

See the Pen qBdzrGO by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

 

 

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

Thanks @mikel

I learn a lot by this examples .. but not working totaly: the horses are starting from an other point.. why?

See the Pen vYOqGvr by karelrosseel-prive (@karelrosseel-prive) on CodePen

Strange behavior: in the mobilephone-chrome: all horses are on each other.. but on on the desktop-chrom

horses%20not%20on%20each%20other.jpg?raw

also 3problems with turing the horses 

3problems.jpg?raw=true

I tried to make the red horse a sprite:

See the Pen NWqQvWr by karelrosseel-prive (@karelrosseel-prive) on CodePen

and afterwards into a codepen:

See the Pen wvaVqKG by karelrosseel-prive (@karelrosseel-prive) on CodePen

 

Problems:

1) the horses start directly

2) the horses not on the beginposition

3) if use of a sprite: how to make a container turnable?

4) how to make a random speed and shuffle to all horses?

I tried but it did not work

See the Pen GRJVvLN by karelrosseel-prive (@karelrosseel-prive) on CodePen

 

thanks to help me a lot

Karel

 

 

Link to comment
Share on other sites

do you know this games

.. but digital.. 

this is what i want to make also.. "1step forward".. "2steps forward" "randomly forward" "restart" "go to the finish"

but all by the circles in color.. or by milliseconds? 

https://images.app.goo.gl/iVm5zpV4NkKDn5JRA

 

 

unnamed (3).jpg

should it be possible to give the position of the horse when the horses are random running?

See the Pen wvaVXoy by karelrosseel-prive (@karelrosseel-prive) on CodePen

original post: 

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

 

Link to comment
Share on other sites

Hey @karelrosseel82,

 

You cannot expect that every question, every problem will be solved here in the GreenSock Forum.

Or even build a complete app for you. We are happy to help when it comes to a specific GSAP question.

 

Check out tutorials when it comes to js constructions or how to e.g. build a sprite.

Just a friendly pointer:

 

See the Pen vYOojpY by mikeK (@mikeK) on CodePen

 

If you need professional help, you can also make a request in the Jobs & Freelance forum.

 

Happy tweening ...

Mikel

 

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...