GreenSock
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Everything posted by GreenSock
-
I'm not familiar with fabric.js, but it appears as though the problem is related to how it is implementing the rotational origin. Here's a codepen that simplifies things by only animating to the final value and then spinning around by animating the angle value. http://codepen.io/anon/pen/RoPxeV?editors=0010 Notice that it's spinning around its upper left corner even though you seem to have earlier set its originX and originY to "center". All that GSAP is doing is changing the value of "angle" in that case - it's not controlling the origin. Is fabric misbehaving? Might be worth checking into its docs (unfortunately I don't have time to experiment with that - we really try to stay focused in these forums on GSAP-specific questions). Please do let us know if this helps at all and if you find a solution (or need more help).
-
Right, you declared currentAnimation on the global scope....AND as a local variable also. That's the whole point (and problem). A locally-scoped one always overrides the global one. I'm not sure you understood my answer Or perhaps I'm misunderstanding your point. Either way, I'm pretty sure that if you remove "var" inside your functions, it'll solve your issue. Did you try that?
-
I didn't have much time to dig into the code, but from a cursory glance it looks like the problem is just that you've got a "var" declaration inside your functions, thus it's treated as a LOCAL variable (dumped as soon as the function is done) rather than altering the global one you set up at the top. In other words: var myGlobal = 1; function BAD() { var myGlobal = 2; //THIS WON'T ALTER THE GLOBAL! It's establishing a NEW, local variable with the same name that's garbage-collected the moment the function finishes running } function GOOD() { myGlobal = 2; //this will work. Alters the global variable. No "var" ahead of it. } Does that help?
-
Wow, thanks so much @cjke.7777 for the insight! Sounds like you're a seasoned React-GSAP pro. Very happy to have you chime in here. Also happy that it's not terribly difficult to have GSAP work well inside of React. You should blog about this somewhere Also, if you have specific recommendations for some sort of "wrapper" that'd make things even easier in React, please let us know. Perhaps it's something you've already tackled and can share with us. (crossing fingers)
-
@jimeast posted this in case it helps: Also, as for having something go a certain speed, you have several options: Use a linear ease (Linear.easeNone) and do the math yourself, like duration = distance / pixelsPerSecond -OR- You could use the PhysicsPropsPlugin or Physics2DPlugin because you can define a certain velocity in those. If it were me, I'd probably just do #1
-
Thanks for pointing this out, guys. It was an invalid arc command, but I needed to add some logic to skip it when it encounters that condition. It should be resolved in the updated version which you can try on codepen using this URL: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js Please let me know if that works well for you and then I can drop it into the official download zip packages.
-
I'm not familiar with create-react-app, but my understanding is that it should be entirely possible to just use <script> tags that point to CDN files for GSAP in your app. I didn't think that required tweaks to the webpack config file, but I'm sure there are others here who have more experience with that and could confirm. Have you tried just using a <script> tag?
-
Thanks for sharing, @staff0rd.
-
I know that several people have done exactly that, but unfortunately I have zero experience with it and we really designed GSAP to be used in a browser so I'm afraid I can't be of much use here. OSUblake may have some insight.
-
Yep, exactly. To the browser, technically you did mousedown AND mouseup on the same element, so it perceives that as a "click". Draggable can't really change that - it's the browser. That's why it's a good idea to just tap into Draggable's onClick which doesn't fire if you drag instead. Does that answer your question?
-
Yep, I've gotta agree with Carl (assuming I understand your question correctly). I believe you're overcomplicating things by trying to bend over backwards to reuse the same timeline to produce various different results. It's probably cleaner to just create the animation you need at the moment you need it. Don't worry - when a timeline finishes it'll automatically make itself eligible for garbage collection and the whole system is optimized for top-notch performance so you don't need to feel like you're doing something bad/wrong by firing off a new tween/timeline each time you need one.
-
Yes and no. GSAP is extremely optimized for performance, so the first time any tween is rendered, it reads & records certain data like the starting/ending values for each target as well as some other stuff so that it can be extremely fast with rendering thereafter. That's why it's often not very cost-effective to try to update an existing tween/timeline's values (it'd have to do the work of flushing out the old stuff as well as recording the new stuff). That being said, yes, you could invalidate() the tween/timeline and update the tween.vars with new values. I just didn't think that's as intuitive as just creating new animations but perhaps in your workflow it'd be fine. As for a method you can call in the ScrollMagic API to accommodate that, I'm really not sure. I've never used that and didn't author that tool. That'd be a question for the ScrollMagic folks (well, Jan the author or someone familiar with that API).
-
Excellent, thanks for letting us know.
-
xtremeplus, sorry to hear about the frustration. We're looking into revamping a few things in the next release to make it easier, but until then have you tried just defining aliases in your webpack config file, like:? resolve: { root: path.resolve(__dirname), extensions: ['', '.js'], alias: { "TweenLite": "gsap/src/uncompressed/TweenLite", "Draggable": "gsap/src/uncompressed/utils/Draggable", "CSSPlugin": "gsap/src/uncompressed/plugins/CSSPlugin" } } ...and so on. This basically just maps things to particular files so that Webpack can find them when you try importing things like Draggable.
-
Thanks for letting us know!
-
Are you saying you don't have a way of dropping that preview of TweenMax into your local setup? Any reason you're loading CSSPlugin in addition to TweenMax (that's redundant since CSSPlugin is included inside TweenMax)? Do you need me to send you an updated version of CSSPlugin alone for your tests? Or did I misunderstand - were you saying you think there's a problem with the new TweenMax that breaks Draggable?
-
I'm not very familiar with ScrollMagic or its API, but I'd guess that it's probably cleanest to just rebuild that timeline with the new values on resize. Just kill() the old one and create a new one. Any reason you can't do that? Oh, and also, your tweening code is valid but you could make it a lot more concise by using the convenience methods of the timeline classes. .from('.line--1', .5, {height: 0}) .from('.line--2', 1, {width: 0}) .from('.line--3', 1, {height: 0}) .from('.line--4', 1, {width: 0}) .from('.line--5', 1, {height: 0}); Happy tweening!
-
There are a bunch of ways to do something like this. Remember, 1.19.0 adds function-based values too, so you can feed a bunch of elements into a tween and use a function to make each one go to a different x/y position. Or just do a loop like this: http://codepen.io/anon/pen/dpEEgM?editors=0010 Play with the numbers in the variables to get the effect you're after. I'm working on another fun tool that could help too - CustomWiggle which leverages CustomEase (available to club members for now, but will be more widely released in a few weeks): http://codepen.io/GreenSock/pen/3566533ea0bf699796bb4d696bd1ca50/ (To understand CustomWiggle a bit better, see this demo: http://codepen.io/GreenSock/pen/LRqkOr?editors=0010) If you'd like an advanced copy, let me know and I'll get it to you. But you shouldn't really NEED it for this.
-
Oh, by the way, the new version always uses the "transform" attribute for SVG transforms by default instead of applying it via CSS because it's more consistent across browsers. Previously, we defaulted to CSS only in Chrome because technically it gave more options (3D, even though the SVG spec doesn't support it but Chrome broke the rules). That's why you were seeing it as matrix3d() in CSS. It's especially important in your case to consistently have it applied to the attribute instead because you're saving and pulling the data back in, which could be in a different browser. You could always set CSSPlugin.useSVGTransformAttr = true to force it. But in the new version, you wouldn't need to.
-
It looks like this has to do with a dividing by zero thing. Here's a preview of the next release (uncompressed): https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/TweenMax-latest-beta.js Does that fix things for you? Please also test if your user saves at a scale other than 1 or 0.
-
Glad you got [most things] working Thanks for reporting back. Since EasePack is embedded inside of TweenMax anyway, you can import those directly from the "gsap" package. In other words: import {Power2, Elastic, Back, TweenMax} from "gsap"; Does that work okay for you?
-
I'm a little confused - so let's say the timeline plays forward, you're fine right? And what exactly you you expect to happen if the timeline goes backwards? Are you saying the elements[1] object wouldn't change its state at all? So it'd remain stuck at -100%? And then what about when the timeline plays forward again? It still stays stuck at -100% or would it suddenly jump back to 100% and start moving again (but only if/when the playhead of the timeline is moving forward)? I just need some help understanding your goal here. You can certainly kill() that tween or pause() it anytime (maybe do it in an onComplete if you want it to stop working after the first play forward).
-
Is there a problem with the scrollTo plugin on iOS 10?
GreenSock replied to joe.cardella's topic in GSAP
Yep, exactly. I'm seeing "how it should look" on every iOS device I've tried. Very odd that you're not seeing the same thing. Makes me wonder if it's something specific to your device. [scratching head] -
I wish we had the time and resources to offer free general support for all types of HTML/CSS/JS/development issues, but we really need to keep these forums focused on GSAP-specific questions. If you need help with other things, perhaps try posting on stack overflow or a site like that. Let us know if you have any GSAP-specific questions; we'd be happy to help.
-
Is there a problem with the scrollTo plugin on iOS 10?
GreenSock replied to joe.cardella's topic in GSAP
Yep, we're on the same page. Totally. Works perfectly on my iOS 10 Safari. Anything in particular I need to do to break it? Can anyone else reproduce the problem on their iOS device?
