en en en en en en en en en en en en en en en en fa en en fr hbs_lat en en en es en en en ms en de en fr en en en ca en en en en en en en en en en en en en en en en en en en en en hbs_lat en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en pl nb en en pl nl en en en en en en en eu nl en en en en en eu nl en en en en en eu nl en en en en en en de nb en en de en zh en en en en en en de nb en en de en zh en en en en fr en es en fr en hu en de en en en en en en en de en en en en en en en fr cv es tr es en en en en ms en en en en en en fr en hbs_lat en en en en en en en fr cv es tr es en en en en de en en en ca en en en en en
MotionPath and PIXI not working together?
jash posted a topic in GSAP
TypeScript and auto import (with IntelliJ IDE) in V3
jash replied to jash's topic in GSAP
Thanks for your quick and detailed answer. To make gsap globally is a handy solution, but it breaks a bit of a module bases approach of bundling only requires modules via imports. But you know gsap is always needed Currently I'm not sure if I prefer string based easing definitions. It is easy to make mistakes (misspelling) and you need to know how exactly the ease is named. If you work in a typed environment with intelligent code completion it is much more easy, self-explaining and safer to use static classes (likeSine.easeOut) to define the ease of a tween. All mistakes will be visible in the IDE or at least during compilation.
TypeScript and auto import (with IntelliJ IDE) in V3
jash posted a topic in GSAP
Hey and congrats to the V3 release! I'm using TypeScript with IntelliJ IDE, which has a fabulous support for auto importing of classes. I was in big hope that your will release "native" TypeDefinitions (which you did!), that will boost my workflow as i know from other libraries. This means, that you do not have to manually write each time import {gsap} from "gsap" by yourself, but that this import statement is managed/added automatically, when writing gsap.to... But sadly, it doesn't work. I still have to add this import statement by myself every time I use gsap. I added 3 screenshots to get this problem more visualized. You see, that all gsap related objects/classes are unknown to the IDE (but they should cause of the TypeDefinitions), but other library objects are known and a correct import statement is suggested (or added automatically). Also, adding the d.ts files to the tsconfig.ts doesn't solve that problem. It removes the error in the IDE, but it throws a compile time error, because the import is still missing. If it helps, I can create a little example of an IntelliJ project. Best regards Matthias
TweenLite.killDelayedCallsTo works unexpected for multiple instances of the same prototype
jash replied to reinierf's topic in GSAP
Is there something on your roadmap to implement a scope-argument (optional) to the killDelayedCallsTo? Finally it was easy to fix some "strange" behaviors in my game, after realizing the problem with the scope. But until that, it took me some time BTW: The above example works great, but you need to use callbackScope instead of onCompleteScope.
BezierPlugin | How to get/calculate values directly
jash replied to jash's topic in GSAP
Thank you for all your answers. @Jonathan: currently i work with pixi.js (WebGL-Renderer). The drop of the frame rate belongs to the execution of JavaScript (CPU). Its not a render-issue (GPU). The frame rate drops, even with no particle displayed on stage. @Jack: i know GSAP is super fast. On desktop- and current mobile-devices my app runs perfect with 60 frames per second. I just try to figure out to optimize the game on older mobile devices Finally i think, even a "pure" calculation of bezier-values, would seriously decrease the frames per second on older devices. I'll try to precompute all values ... best regards
BezierPlugin | How to get/calculate values directly
jash replied to jash's topic in GSAP
Formatted console logs. Very nice thank you for that hint to use TweenLite/Max to get the values i need. In my case i want to keep the used codebase as small as possible, that is why i don't want to use TweenLite/Max. Maybe even the BezierPlugin is already to much. Actually i used TweenMax for animating tons of particles. On the iPhone 5 the frame rate drops down to 35FPS, but if i update all particles directly within a render-loop, frame rate increases up to 60FPS. But this was just a quick performance-test with a much simpler, linear transition. So, there is not a direct access to calculate that values from a bezier-object?.
BezierPlugin | How to get/calculate values directly
jash posted a topic in GSAP
Hey – is there a possibility to get a specific value from the BezierPlugin like this: var bezier = BezierPlugin.bezierThrough([{x,y}], curviness, ...); var value = bezier.getValue(progress) // progress is between 0 and 1 console.log(value.x); console.log(value.y); Best regards
RoundProps on Draggable (incl. throwProps = true)
jash replied to jash's topic in GSAP
Thank you for your really good answer. Both solutions working perfectly. Setting "liveSnap: true", will snap the pixels also during dragging. So i think with "snap" and "liveSnap", there is no need for a special property "roundProps" for Draggable. Maybe just a little hint in the documentation would be helpful (keywords: whole pixels, pixel-snapping, roundProp,..)
RoundProps on Draggable (incl. throwProps = true)
jash posted a topic in GSAP
Hi, simple question: How can i tell a Draggable that all values during dragging and during throwing are rounded values. During dragging it seams that it uses rounded values already, but when it came to the second part, where a tween for throwing takes control, the values are not rounded anymore. This leads to blurry text or little gaps i.e. between images (translate3D(23.3234233, ...). I know i can request the tween (via draggable.tween), which is created after onDragEnd, but i have no chance to set roundProps to a tween instance which is already created? In my view, the easiest solution would be to have a roundProps-properties to set via the vars-object when creating a Draggable. Draggable.create("#yourID", {type:"x", throwProps:true, roundProps:["x"]}); Thanks.
“GreenSock is the best thing that happened to SVG animations since SVG animations.”
“Go and browse through FWA or Awwwards, then view source of anything you see that has cool animation and you will be surprised how widely GSAP is used.”
“I will never say it enough but @greensock you are absolutely amazing and you have no idea how much time and brain cells I have spared thanks to you 🥰”
“Spent today converting an animation to pure CSS, and then into GSAP. GreenSock was an order of magnitude easier. Love it.”
“I can definitely say ever since I started using GSAP, my work exponentially improved. It basically changed my life.”
“If every library were as robust and reliable as GreenSock’s, the world would be a much better place for software engineers and their clients. I can't think of a better designed or better performing tool, and as a bonus, it's fun as heck to play with.”
“Performance has been of paramount importance for GreenSock, so there is always peace of mind for us, developers.”
“Without GSAP I would have ditched front-end dev the day Flash officially died.”
“This stuff is so incredibly amazing I can't believe it. The level of details and options put into these things and the natural instinct GreenSock has for solving everyday problems is impressive.”
Sign Up For Our Newsletter
Get the latest updates on GreenSock products, exclusive offers, and more right in your inbox.
Your information will always be kept confidential.
Thanks for signing up!
Now you'll begin receiving the latest GreenSock updates, exclusive offers, and more right in your inbox. Welcome aboard.