Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Dez

MotionPathPlugin

Recommended Posts

Every time I see this thread full of trains it reminds me of Daniel Shiffman’s coding train. 😀

  • Like 1
Link to post
Share on other sites
9 minutes ago, Dez said:

What do you use to create the SVG’s? Has anyone ever thought of creating a tutorial for it? I’ve used Illustrator, Gimp, Inkscape, Affinity Photo and Designer etc. But the code I output never looks as concise as yours.

For simple things we usually write them by hand :) For more complex things, we use one of the programs you listed and then usually cut out the irrelevant parts using SVGOMG and/or by hand.

  • Like 3
Link to post
Share on other sites
1 minute ago, Dez said:

If you don’t mind me asking. What do you use to create the SVG’s?

 

A graphic designer. Saves me so much time. 😉

 

9 minutes ago, Dez said:

But the code I output never looks as concise as yours.

 

I do use Illustrator, but sometimes that can create sloppy code. Running it through it something like svgomg can help clean it up.

https://jakearchibald.github.io/svgomg/

 

Also, I tweak a lot of stuff by hand.

 

 

  • Like 2
Link to post
Share on other sites

I too have used all those apps and yes SVGOMG is a must (especially for Illustrator 😵).

 

Boxy SVG is another nice one. Its $10 for the desktop app and allows you to create visually and see the code simultaneously. So that may help with learning and understanding SVG.

Link to post
Share on other sites
6 minutes ago, Shrug ¯\_(ツ)_/¯ said:

Boxy SVG

 

An old favorite of mine! Didn't know they started charging for it though.

 

 

  • Haha 1
Link to post
Share on other sites
48 minutes ago, Dez said:

SVG’s? Has anyone ever thought of creating a tutorial for it?

 

These are all older, so somethings may no longer apply to GSAP 3, but you should still be able to get some good insight into SVG + GSAP related things.

 

https://greensock.com/svg-tips

https://greensock.com/forums/topic/13681-svg-gotchas/

https://greensock.com/forums/topic/18010-better-adobe-illustrator-svg-exports-make-gsap-animating-easier/

 

In case you have not seen them previously and for others happening across this thread.

 

This is a good comprehensive one also:

https://svgontheweb.com/

  • Like 1
Link to post
Share on other sites

Thanks for the replies guys,

Acting on your advice I took a closer look at Illustrator via a Youtube video called “How to Optimize/Simplify Path in Adobe Illustrator Tips for Beginners” and discovered the “Object/Path/Simplify” menu.

That along with SVGOMG should cut down on my SVG code and make life a lot easier.

I'll also be looking at the links Shrug has pointed me to.

Regards,

Dez

  • Like 2
Link to post
Share on other sites

Good afternoon guys,

Sorry, to have to come back with my latest problem.

In the Firefox console I get errors:
       "Unexpected value undefined parsing cx attribute."
       "Unexpected value undefined parsing cy attribute."

     In JS lines 33 & 34.

These errors are what seems to be stopping the wheelPath rotation.

These errors don't show in my CodePen demo console. But the result is the same.
Please see:

See the Pen dyoJRKv by spring99 (@spring99) on CodePen

 

Any ideas anyone. I've redone so many times, over and over, with the same result.

Thank you,

Dez

Link to post
Share on other sites

Hey Dez.

 

If you console.log what p is, you will see that it's returning a Matrix2D object, not a point. This is because you didn't provide a point object as the third parameter - see the .convertCoordinate docs for more information.

 

I think you want something like this?

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

 

If you're going to be updating the same properties over and over in a callback like that it's probably better to use .quickSetter:

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

Link to post
Share on other sites

Hey @Dez,

 

In my childhood, steam locomotives were still a normal part of our everyday life.

I can still hear the sounds, the steaming and whistling. Fascinating, impressive technology.
And here is a small replica (work in progress):

 

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

 

Happy steaming ...

Mikel

  • Like 4
Link to post
Share on other sites

Hi Mikel,

Thank you for taking an interest in my post.

I too am of the age when there were only steam locomotives. I remember them well.

We’re booked on the newly built “Tornado” locomotive in a couple of months time.

 

Your “work in progress” is brilliant and I’m hoping that mine will be as good eventually.

But it’s proving a small headache at the moment. I think my age is getting in the way.

Anyway happy steaming to you too,

Dez

  • Like 3
Link to post
Share on other sites

Hi All,

Back again with my latest problem. I've been attempting to modify Zach and Blakes "convertCoordinates" pens, to suit my loco animation, but I can't get the piston link arm to follow the blueArm. Any ideas would be greatly appreciated.

See the Pen bGdJMPO by spring99 (@spring99) on CodePen

Link to post
Share on other sites

Hey Dez. The issue is that the blue line is a line (which has x and y coordinates for the start and end) whereas the pistonlink is an image (which doesn't have start and end x and y coordinates). You have to use a different approach as such.

 

You can take a look at what mikel did in his demo (the treibstange variable) and do something similar. He updated the rotation in the onUpdate:

onUpdate: function() {
  let prog = this.progress();  
  gsap.set(treibstange, {rotation: Math.sin(prog * Math.PI * 2) * - 6.5, transformOrigin:'left center'}); // ???
}

 

  • Like 1
Link to post
Share on other sites

That's exactly what I wanted Blake. I tried the method Zach suggested of Mikels. But both Mikel and I had difficulty keeping the piston end of the rod still. It tended to wander up and down, albeit a small amount.

But this way it stays rock steady. Great stuff Blake. I don't know how you do it in such a short space of time. I've been at it for days to no avail, although as Zach says I was using the complete wrong approach.

Thanks again to all for your kind help.

  • Like 1
Link to post
Share on other sites

Hey all Steam Locomotive fans,

 

So now the wheels roll with steam?
No powered by GSAP scrollTrigger - your finger!

 

See the Pen abvXeoV?editors=0010 by mikeK (@mikeK) on CodePen

 

Sorry, not perfect for the small height of this iframe.

 

Happy scrolling ...

Mikel

  • Like 3
Link to post
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.

×