Search the Community
Showing results for tags 'tool'.
Found 4 results
-
I am not sure if this is relevant for this forum. But just a food for thought. (: Looking at the rise of prototyping tools in the market. I am thinking have you guys thought of leveraging existing GSAP to create a prototyping tool? Something similar to Framer studio. framerjs.com Designers are open to the idea of coding. GSAP has an extensive animation library with a good track record that it is well performant across devices. And the good thing that the code is even reusable on responsive web. For native animation in Android/iOS, I am sure the mobile developers will be able to glean the code to get useful motion attributes out from it.
-
Hi GreenSock forum! I'd like to show you this alpha state editor tool for GSAP. It'd be great to know what you think about it (opinions, suggestions, feature requests, ...everything that could help to aim the development into the right direction:) Briefly, it puts traditional animation tools over your page so you can pick dom elements animate them on timeline then save the animations in a .js file what you can easily add to your project. Github: https://github.com/animachine/animachine Chrome extension: https://chrome.google.com/webstore/detail/animachine-alpha/gpnfomkfgajaojpakbkikiekmajeojgd @animachinejs
- 9 replies
-
- 6
-
-
- animachine
- tool
- (and 1 more)
-
GSAP Bezier Curve ViewerI've been working with bezier plugin quite a bit recently and made a tool to help visualize the curves as creating them blind is no fun! At its heart it's just this function, which should work to visualize any tween (uses jQuery): let visualizeTweenMaxBezier = (tween, steps) => { for (let i = 0; i < steps; i++){ tween.progress(i/steps); $("body").append("<div id='point" + i + "'></div>"); $("#point"+i).css({ position: "absolute", width: "2px", height: "2px", "background-color": "#7F7F7F", top: tween.target.css("top"), left: tween.target.css("left"), }); } tween.restart(); } Currently it generates code based on screen pixel values, if people are finding it useful though I might update it to generate code based on screen percentage, or percentage positions within the containing element. Happy coding!
- 4 replies
-
- 1
-
-
- bezierplugin
- tweenmax
- (and 5 more)
-
Hey all! I've been doing a lot of animating along bezier curves and created a simple little helper tool/function that converts an SVG path into an array of cubic bezier points that can be plugged directly into GSAP Tweening functions. It's still missing a little functionality for quadratic and elliptical arc movements, but I haven't come across any issues with it yet converting SVGs saved out of Illustrator. Just thought I'd share in case anyone else finds it useful. http://github.com/mattanglin/svg-to-cubic-bezier I'll update to incorporate the other SVG movements (and cleanup the code. It's pretty quick and dirty at the moment...) as I have time. Any feedback welcomed. Thanks!
