Share Posted May 5, 2019 I'm starting at the beginning with GSAP just to make sure I've got everything configured correctly and I'm understanding what I'm trying to do (highly unlikely.) Any help with getting the red ball with a black border moving would be greatly appreciated. There's a CodePen under my name. Regards, Bobby Ballard See the Pen PvoOYv by codeKnock (@codeKnock) on CodePen Link to comment Share on other sites More sharing options...
Share Posted May 5, 2019 Hi @Bobby Ballard, The issue is that your trying to include TweenMax from https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.max.js ... which doesn't exist. It should be https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js See the Pen BeaYmv by sgorneau (@sgorneau) on CodePen 2 Link to comment Share on other sites More sharing options...
Share Posted May 5, 2019 Just some other notes in addition to the things Shaun mentioned: 1. You have a typo // switch this funtion runAnimation() // to this function runAnimation() 2. It looks like you have two durations in your constructor var tween = TweenLite.from(myCircle, 5, 0.5, {left:"1200px"}); // I assume you meant to do this var tween = TweenLite.from(myCircle, 5, {left:"1200px"}); 3. Left isn't a property of an SVG circle — you'll want to use x like @Shaun Gorneau did in his demo or the cx attribute. var tween = TweenLite.from(myCircle, 5, {x:1200}); Happy tweening. 2 Link to comment Share on other sites More sharing options...
Author Share Posted May 5, 2019 Thanks very much for your help along with Shaun. It's moving. Thanks again. Regards, Bobby Ballard Link to comment Share on other sites More sharing options...
Share Posted May 5, 2019 2 hours ago, PointC said: Just some other notes in addition to the things Shaun mentioned: 1. You have a typo // switch this funtion runAnimation() // to this function runAnimation() 2. It looks like you have two durations in your constructor var tween = TweenLite.from(myCircle, 5, 0.5, {left:"1200px"}); // I assume you meant to do this var tween = TweenLite.from(myCircle, 5, {left:"1200px"}); 3. Left isn't a property of an SVG circle — you'll want to use x like @Shaun Gorneau did in his demo or the cx attribute. var tween = TweenLite.from(myCircle, 5, {x:1200}); Happy tweening. Thanks Craig! I made a few changes and completely forgot to mention them (and why I made them) ... you da man ?? 2 Link to comment Share on other sites More sharing options...
Share Posted May 9, 2019 Most dedicated code-editors have some form of auto-formatting and / or JavaScript error checking . VSCode has it built in, but there are extensions for Sublime, etc. These auto-formatters should be able to catch typos, invalid or too many parameters, wrong brackets, etc. Link to comment Share on other sites More sharing options...
Author Share Posted May 9, 2019 Thank you very much for the tip. I currently use Dreamweaver and I'm very UNHAPPY with it's performance and age. It's part of my Adobe CC Suite. Given the name is VSCode can I surmise that is like the Visual Studio editor I've used for years? I am going to check out VSCode. Thanks again. Link to comment Share on other sites More sharing options...
Share Posted May 9, 2019 VSCode aka Visual Studio Code is a free code editor by Microsoft, but it is not the same as Visual Studio. The latter is an Integrated Development Environment, which is overkill for most JavaScript projects. Link to comment Share on other sites More sharing options...
Author Share Posted May 9, 2019 I agree. I don't need MSVS for web stuff. However, I've always loved MS code editors starting with MASM and Visual C and on and on. I installed VSCode and was looking for some GSAP support...debugger, ed. extention, etc. I love GSAP! My best, Bobby 1 Link to comment Share on other sites More sharing options...
Share Posted May 10, 2019 15 hours ago, Bobby Ballard said: I agree. I don't need MSVS for web stuff. However, I've always loved MS code editors starting with MASM and Visual C and on and on. I installed VSCode and was looking for some GSAP support...debugger, ed. extention, etc. I love GSAP! My best, Bobby There is a GSAP snippet for VSCode: https://marketplace.visualstudio.com/items?itemName=hridoy.gsap-snippets that will complete a block of code for you. You only need to replace the parameters. Once you gain a mastery of the syntax you likely won't need the snippet. Also have a look at https://ihatetomatoes.net/get-greensock-101/ for an excellent and free GSAP course. 1 Link to comment Share on other sites More sharing options...
Share Posted May 10, 2019 On 5/5/2019 at 9:10 PM, Shaun Gorneau said: https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.max.js Can one imagine what a .max version of TweenMax would be like? ? Wormholes would appear, light would bend, world peace! 3 Link to comment Share on other sites More sharing options...
Author Share Posted May 10, 2019 ...and we would become the animation as it consumes us. 3 Link to comment Share on other sites More sharing options...
Share Posted May 14, 2019 On 5/10/2019 at 6:18 PM, Bobby Ballard said: ...and we would become the animation as it consumes us. Blissifully happy as one with the universe. 2 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now