Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

OSUblake last won the day on August 22

OSUblake had the most liked content!


  • Content Count

  • Joined

  • Last visited

  • Days Won


Everything posted by OSUblake

  1. Best framework advice ever!!! Start simple, then scale up. I haven't heard of that law before, but I love it! +1
  2. Are you literally trying to remove the ease from memory? You can do this: CustomEase.create("myEase", "M0,0 C0,0 0.056,0.442 0.175,0.442 0.294,0.442 0.332,0 0.332,0 0.332,0 0.414,1 0.671,1 0.991,1 1,0 1,0"); delete Ease.map.myEase; But that's pretty much pointless. The performance of your app will improve 0.000000000%. Even if you have 10,000 different custom eases in memory, the performance difference will be negligible. When it comes to profiling animations, the main things you should be mindful of are rendering and painting times in the performance tab.
  3. First, don't create a custom ease inside an animation. Do it like this: // Create your custom ease CustomEase.create("myEase", "M0,0,C0.126,0.382,0.282,0.674,0.44,0.822,0.632,1.002,0.818,1.001,1,1"); // Use the ID you gave your custom ease TweenLite.to(foo, 1, { ease: "myEase", x: 100 }); TweenLite.to(bar, 1, { ease: "myEase", x: 200 }); Sure. Just re-create an ease with the same ID. // myEase #1 CustomEase.create("myEase", "M0,0,C0.126,0.382,0.282,0.674,0.44,0.822,0.632,1.002,0.818,1.001,1,1"); // myEase #2 CustomEase.create("myEase", "M0,0,C0,0,1,1,1,1"); // These will use myEase #2 TweenLite.to(foo, 1, { ease: "myEase", x: 100 }); TweenLite.to(bar, 1, { ease: "myEase", x: 200 });
  4. Yep, that's exactly why I brought it up. If this post hadn't come up, I was still going to ask. Now is the time to make breaking changes.
  5. Yes, but it's very choppy because it can't animate the in-between values. To animate font weight using font-variation-settings, which can fill in the in-between values, you have to use a compatible font. Here's a good place to find some. https://v-fonts.com
  6. You can't animate font weight the way you want. This post does a good of explaining why. https://stackoverflow.com/a/16629941/2760155
  7. Well that's the problem. Your CSS transform transitions are conflicting with GSAP JavaScript animations. Get rid of that addClass/removeClass stuff and replace it with GSAP animations, and you should be good. BTW. There is no need to wrap stuff in a css object. TweenLite.to($circle, 0.3, { x: e.clientX, y: e.clientY });
  8. Not without a lot of work. @GreenSock what do you think about adding gestures to the next version of Draggable, to be more like hammer.js? http://hammerjs.github.io/ hammer.js is an awesome library, but it's really not maintained anymore, so GSAP could fill that void.
  9. And switch it to use x and y like in my demo. I don't use left and top anywhere.
  10. Yes, that would be helpful. I was having trouble installing boilermaker last night. It doesn't seem to like windows environments. And include a spec too.
  11. I think that issue is related to the environment, which is designed for mobile games. I'm not familiar with the environment in that issue, but I've used several like it in the past, and DOM functionality is very limited. You're basically limited to canvas support. Do you know what browsers are causing this error. A quick search brought up this issue for Servo, which is an experimental browser. https://github.com/servo/servo/issues/14779
  12. Ok. I'll try to test that out later today. Do I need to setup databases and OAuth for it to run?
  13. You might be able to import from a CDN in your test like this: import { TimelineMax } from "https://unpkg.com/gsap@2.1.3/all.js?module"; Or maybe, like this: import { TimelineMax } from "https://unpkg.com/gsap@2.1.3/all.js"; Really not sure how webpack will treat those. You may need to link to the umd versions. Those are coming from the unpkg cdn. https://unpkg.com/ https://unpkg.com/browse/gsap@2.1.3/
  14. What version of webpack are you using? v4 has problems mixing es modules with umd. v3 doesn't. Also, have you tried using require() instead of import for the umd? If you go back to using es modules, try letting babel transpile gsap in your node_modules folder. See if this post is any help. _gsTweenID is added to every object/element it animates. The only way I can see that error happening is if what you're trying to animate isn't an object, but a primitive like a string or number. Setting up build environments can be a real PITA sometimes. Have you considered using something pre-made, like Create React App? https://github.com/facebook/create-react-app
  15. I see. I actually made a game like that many years ago, although I didn't use GSAP. I would recommend checking out the docs for TweenMax. https://greensock.com/docs/TweenMax Here are some methods that you might find useful for this: TweenMax.getTweensOf() TweenMax.isTweening() TweenMax.killTweensOf()
  16. What's the condition, and how often is it being checked? How would you stop an animation outside of a stagger? Same process. This returns an array of the animations in the stagger. var tweens = TweenMax.staggerTo(wordsElem, 10, { top: '100%' // yPercent: 100 }, 2); // this will kill the second animation tweens[1].kill();
  17. At its core, GSAP doesn't do DOM manipulation. That's what the CSSPlugin does, so yes, you can use the easing functions for whatever you want. Every ease has a .getRatio() method, where you pass in a normalized value from 0 to 1. var ratio = Power1.easeIn.getRatio(0.5); Check out this post where I use different easings to plot points for sine waves. If you need help normalizing a value, here's a little helper function. Just pass in the current, min, and max values. // normalize will return a value between 0 and 1 function normalize(value, min, max) { return (value - min) / (max - min); }
  18. There are many ways to solve a problem, but what you have looks good!!! And thanks for the CodePen demo. It will be very helpful to Animate users who come across this post in the future. 🙌
  19. I'm not trying to call you out, or anything like that. This is just a little FYI. event.pageX/pageY don't exist on touch events. They never have, and never will. To read the pageX/pageY property for a touch event, you will need to look in the event.changedTouches, event.targetTouches, or event.touches property of the event, which is an array. https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent/changedTouches https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent/targetTouches https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent/touches Those properties are inside an array because you might have more than one pointer. Remember, the average human has 10 pointers on their hands. 🖐️🖐️ Some people love to hate on IE/Edge, but Microsoft did get one thing right with those browsers, PointerEvents. 🙌 https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent IE/Edge gives you the correct numerical value, because IE/Edge uses PointerEvents, which have an event.pageX/pageY property. Microsoft browsers don't use touch events, and thankfully, the other browsers have started to follow suit. For more information, here's a good article about how to work with touch and PointerEvents. https://developers.google.com/web/fundamentals/design-and-ux/input/touch/#add_event_listeners Again... that was just a little FYI about why event.pageX.pageY might be undefined in the event passed into a Draggable callback. I don't think there is a practical reason why you would ever need to use the event passed into a Draggable callback. If you stick to using the API provided by Draggable, you shouldn't encounter too many problems.
  20. Unfortunately, no. Using += or -= is just a shortcut. You can, however, use the ModifiersPlugin to do something similar to that. https://greensock.com/docs/Plugins/ModifiersPlugin Here's a simple example. https://codepen.io/GreenSock/pen/QEdpLe And a couple advanced demos using Draggable and the ThrowPropsPlugin. https://codepen.io/osublake/pen/veyxyQ https://codepen.io/osublake/pen/ZOgGXB
  21. Are you seeing this on a HiDPI monitor, like a 4k, 5k, Retina, mobile, etc? It might be because you are using a background image, which doesn't adjust for the resolution of the display. I, for one, have never recommended using background position for sprite sheets. I think it's better to use transforms like x and a real image. See #2 in this demo for an example of that. https://codepen.io/MAW/pen/MYdwRP And this demo for a sprite sheet that has rows and columns. https://codepen.io/osublake/pen/LJjpoo Not really. I always have an artist to that sort of stuff for me. It's pretty performant. Using transforms is even more performant.
  22. That error looks like it is expecting umd/CommonJS modules instead of es modules. I would try loading the umd versions of GSAP. import { TimelineMax, Power0 } from "gsap/umd/TweenMax"; import Draggable from "gsap/umd/Draggable";
  23. The animation will run if you comment out the tl in the second useEffect, which doesn't make a lot sense. https://codepen.io/osublake/pen/38b42207b0a9b5c0514ccc0508da9862 And like you, I haven't dug into the hooks API yet, so maybe I'm missing something obvious.