cgorton

Thank you so much! I am so excited to dive in and learn even more GreenSock. I've been behind on Scrolltrigger and this looks like just what I need to get up to speed.

I love the freedom to create without all the worry about cross browser performance. Dealing with transforms cross browser with CSS animations is... fun. I also love the ability to change timing on larger animations in one place (like a master timeline) instead of having to go in and change the timing for every tween when some one says "Hey I think this could be faster!"

Hi @Matjaz Trontelj If you are still looking I am interested in this. I have been working with Greensock for a few years now. I have created courses and documentation on SVG, GreenSock, and more. I am currently doing some freelance part-time work creating documentation for an online course platform called ExamPro. You can learn more about me, my courses, and writing here . I'd love to connect. You can reach me at chmagorton@gmail.com if you would like to talk more about it.

Ok so I got it to work. It ended up being a dumb mistake. I never went back and checked what version of GSAP we were using. It was like 1.2 something. I updated it and tried this way Which also means you need to name your imports. Instead of simply "import 'gsap/Physics2DPlugin'" you'd need to do "import Physics2DPlugin from 'gsap/Physics2DPlugin'". Did you put the Physics2DPlugin.js file from "bonus-files-for-npm-users" into your node_modules/gsap folder? And now it works!

Coming back to this in case anyone has any other suggestions. Initially we changed the tech we were using again so I stopped worrying about this plugin but now I need to use it again and am having the same problems. I have done all that was suggested above and still just get errors or a blank page. My boss gave me a few more things to try. We tried using a require statement in our main.js folder after I added the Physics2DPlugin.min.js to our plugins folder so I called it like this require('./pluginsPhysics2dPlugin.min.js') When I did I got this error again. " This dependency was not found: TweenLite in ./src/plugins/Physics2DPlugin.min.js " So I tried requiring the uncompressed Physics2DPlugin and once again I got now errors but my screen was completely blank and nothing worked. Next he suggested I try adding the plugin code to our own Amazon S3 bucket and calling it in the head of our index.html file. This didn't do anything either. I'm at a loss on how to get these bonus plugins to work. I am not sure how to provide a reduced test case. I didn't set up our existing project that was done by other engineers I am just going in and adding the animations.

Well I thought that fixed the problem. I did go back and add the one from the bonus-files-for-npm-users and stopped getting errors but now when I open the page it is completely blank. If I take the import 'gsap/Physics2dPlugin' out then I can see my template and styles again. I don't see any console errors or build errors so I am not sure why it is causing my screen to go completely blank when I add that import in. Anyone seen this problem before?

Me again ?. My boss and I have been having trouble importing the Physics2D plugin into our Vue application. I added it the the gsap/node_modules folder and tried to import it as seen in the image. I keep getting an error that says "This dependency was not found: * TweenLite in ./node_modules/gsap/Physics2DPlugin.js To install it, you can run: npm install --save TweenLite" But I can import TweenLite and it is also in the gsap/node_modules folder so I am not sure how to resolve it. I was able to import the ColorPropsPlugin just fine but cannot get the Physics one to load. Any suggestions?

Sorry for the overly large demo . This is for a "game" basically I wanted to be able to add it to a timeline because I will be using it all over the place, sometimes multiple emitters with different images at the same time. As an example ( I have to keep this set as a private pen, sorry!) this is one of the prototypes for one of the game sequences I originally did with SVG, clip-paths for the emitters, and GSAP. I am now trying to do a lot of the animations in Canvas along with SVG for some of the more complicated ones but the emitters especially they want to be done with canvas now. @OSUblake Thank you for the demo. I'm used to seeing the emitters just continuously emitting so seeing how to toggle it on and off definitely helps.

If anyone has some time and feels up to it I could use a little more help. I have been trying to figure out for the past week how to turn a canvas emitter like this into a reusable function that I can add to a master timeline. I've done something similar was divs and svg but I can't seem to figure out how to add this one to a timeline. I'm wanting to add it to the end of the master timeline here when the last square turns red after you hit the bid button. I was able to turn the gridColor animation into a reusable timeline function and added it to my master timeline but couldn't figure out this one ? Any help in the right direction is appreciated.

Thanks @OSUblake. That was really helpful. I was finally able to get a working prototype for an animation at work thanks to these examples. Still playing around to get exactly what I want but this was so helpful. I didn't know es6 had classes... that makes things easier

Hey @OSUblake. Thanks for the demos and resources. Last week I went through all of these tutorials https://www.kirupa.com/canvas/ Today I have gone through almost half of the book that Sahil and Craig suggested. I'll look at the resources you suggested as well. One thing I am stuck on (and this is probably mostly due to the fact that I am not very good with JS) is how to reuse the objects you create. So for example the myRect object you put in the demo. If I wanted to add multiple squares would I use new myRect(); each time I wanted to make a new square?

Thanks for the Pixi demo @PointC I'd love to try it out and might learn it on my own time but unfortunately I have been tasked with not adding any more libraries to the app I am animating for. I originally did all of the animations in SVG and GSAP (there are a lot of animations I have already completed) but my manager wants me to try to do the same animations in canvas to see if the game will be faster ¯\_(ツ)_/¯ @Sahil sorry about the private pens. I'll try to remember that for next time

Thank you @Sahil. That looks really helpful. I'll play around with the pen you made and check out the book. I appreciate the help.

Hello all, I am working on learning canvas. I mostly work with SVG and GSAP so getting the hang of canvas has been a little rough :) I am having trouble animating something I thought would be simple. I need to animate the fillStyle of a couple of squares I created with Canvas. It needs to be a stagger animation. I originally did something similar here with just DOM elements and GSAP https://codepen.io/cgorton/pen/63d15b9bb37e19c8cd4ee3191bb1a42d?editors=0010 From looking at the forum I see I should use the colorProps plugin to animate the fillStyle. I was able to get it working on one square by forking an example I found here https://codepen.io/cgorton/pen/f40d8c929d7dc6f03ea335ce0791f0bb?editors=0110. What I can't seem to understand is how I would do something like this as a stagger animation in Canvas instead of just onUpdate. This is the canvas squares I have created. ( if anyone has a better suggestion for creating the squares feel free to let me know :) ) https://codepen.io/cgorton/pen/73443ae63119ea6153d73649c54dedcc?editors=0110 Any help on where to go from here would be greatly appreciated.