Share Posted March 5, 2020 Every time I see this thread full of trains it reminds me of Daniel Shiffman’s coding train. 😀 1 Link to post Share on other sites
Share Posted March 5, 2020 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. 3 Link to post Share on other sites
Share Posted March 5, 2020 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. 2 Link to post Share on other sites
Share Posted March 5, 2020 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
Share Posted March 5, 2020 6 minutes ago, Shrug ¯\_(ツ)_/¯ said: Boxy SVG An old favorite of mine! Didn't know they started charging for it though. 1 Link to post Share on other sites
Share Posted March 5, 2020 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/ 1 Link to post Share on other sites
Author Share Posted March 5, 2020 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 2 Link to post Share on other sites
Author Share Posted March 10, 2020 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
Share Posted March 10, 2020 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
Share Posted March 10, 2020 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 4 Link to post Share on other sites
Author Share Posted March 11, 2020 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 3 Link to post Share on other sites
Author Share Posted April 2, 2020 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
Share Posted April 2, 2020 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'}); // ??? } 1 Link to post Share on other sites
Share Posted April 2, 2020 You could just animate the rotation. It's hard figuring out an exact transform origin on your image, but something like this. See the Pen 009d53625978e660b93a7265cfc0f826 by osublake (@osublake) on CodePen 4 Link to post Share on other sites
Author Share Posted April 2, 2020 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. 1 Link to post Share on other sites
Share Posted June 21, 2020 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 3 Link to post Share on other sites
