OSUblake last won the day on August 16

OSUblake had the most liked content!

OSUblake

Moderators
  • Content count

    2,543
  • Joined

  • Last visited

  • Days Won

    260

OSUblake last won the day on August 16

OSUblake had the most liked content!

Community Reputation

4,797 Superhero

About OSUblake

  • Rank
    Moderator

Profile Information

  • Gender
    Not Telling

Recent Profile Visitors

12,250 profile views
  1. Hi @bvkdigital The code for my Mario product rotator might be a little confusing because it was part of a larger app, so it's set up a little differently. It could do other stuff, like mouse wheel zooming. 360 is the magic number because while this is not a 3d object, that's exactly what we're trying to simulate. Something that looks and functions a little like this... So we need to figure out 2 things. How to convert the dragging motion into a rotational value, and what frame should be showing at that angle. deltaX and deltaY are new properties for Draggable. They report the amount of change since the last drag. So if x is at 75, and on the next drag x is at 100, deltaX would be 25. If you added that 25 to the rotation value, it's essentially the same as adding 25 degrees to it. So a 1:1 ratio. The delta value could also be considered the velocity at that moment in time. I'm multiplying the delta value by a speed value just as a way to let you control how fast it will rotate. The number I choose is completely arbitrary. You can use whatever value you want. productRotation += this.deltaX * speed; // use whatever value you want for speed The productRotation value is really just a running total of the (deltaX * speed) values, so we need to convert it into an angle. That value could be very high, and even negative, and the remainder operator (%) will give us a number in the range of +/-360. -55555 % 360 // => -115 361 % 360 // => 1 270 % 360 // => 270 And dividing that value by 360 will give us a ratio, which we can multiply and by our frame count to give us an index value. var count = numFrames - 1; // subtract 1 because arrays start at 0 var ratio = (productRotation % 360) / 360 var index = Math.round(ratio * count); There's a couple problems with that. The ratio might be negative, giving you a negative frame index. You could compensate for this in the ratio calculation by adding the remainder value to 360. var ratio = (360 + (productRotation % 360)) / 360; I did something a little a different for no particular reason, but it works out the same. I'm adding the index to the count in another step if it's less than 1, otherwise I subtract 1 from the index. var index = Math.round((productRotation % 360) / 360 * count); index = index < 1 ? count + index : index - 1; Now the reason for subtracting 1 might be a little confusing. The frame for an angle of 0 and 360 should be the same, so the last sprite sheet frame should be for an angle that is less then 360, but our ratio was calculated using 360, giving us an extra frame index. Does that help? For anybody else trying to do this, my description is much longer than the actual code. var speed = 0.35; var numFrames = frames.length; var productRotation = 0; Draggable.create(proxy, { throwProps: true, trigger: proxyTrigger, onDrag: updateImage, onThrowUpdate: updateImage, cursor: "ew-resize", maxDuration: 0.65, }); function updateImage() { productRotation += this.deltaX * speed; var count = numFrames - 1; var index = Math.round((productRotation % 360) / 360 * count); index = index < 1 ? count + index : index - 1; singleProduct360Anim.gotoAndStop(index); // Pixi animated sprite }
  2. I never could understand the popularity of sublime text... *cough* @kreativzirkel Not sure about the Pixi problem. Is the error with something that you are extending, or something that pixi does? My license is expired so I can't test right now, but I use another JetBrains product, ReSharper, and will see if it has the same problem. It's usually pretty good at being able to infer types in JavaScript. But the best way to get the most out of the editor is to just use TypeScript. You're smart, and you know ActionScript, so it should take you no time at all to get up to speed. It really is a game changer if you work on large or complicated projects. If you want to try it out, you'll have to add the definitions to your project. The external library definitions are just for JavaScript. And I would still use those old GSAP definitions I linked to. You can search for other types here.
  3. See how this works. I slowed the animation down and increased the size to make testing easier.
  4. Oh wait... are you talking about the codepen above? Didn't see that you edited that post.
  5. You forgot the codepen. And I only used the modifiers plugin in that demo to make the images loop and hide the images that were out of view.
  6. That's pretty good @Carl You could also play around with adding the rotation to your Bezier values. Beziers aren't limited to x and y values. TweenMax.to(element, 2, { bezier: { values: [ { x: 100, y: 10, rotation: 0 }, { x: 200, y: 20, rotation: -30 }, { x: 200, y: 30, rotation: 30 }, ... ] } });
  7. Using getVelocity won't work without the throwProps. But even with that working, your function is going to change the frame at a constant rate regardless of how fast you are dragging. Is this more like what you were going for?
  8. I added webkit to that demo. GSAP will add a prefix, but you were already using a prefix. Although you had webkitClipPath. I think it should be WebkitClipPath, but it seems to work with both WebkitClipPath and webkitClipPath. Not sure what's going on there. Check out the docs to understand what autoCSS does. The tweening as a string works by finding the numbers that are different, so it would split it up kind of like this. The numbers have to match up somehow. You couldn't have like extra points in that polygon and expect it to tween correctly. That would need a plugin similar to how morphSVG works. // strings "polygon(0% 0%, 0% 100%, 0% 100%, 0% 0%)" "polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%)" // difference ["polygon(0% 0%, 0% 100%,", 0, "% 100%,", 0, "% 0%)"] ["polygon(0% 0%, 0% 100%,", 100, "% 100%,", 100, "% 0%)"] And I don't know why using a string like that doesn't work with clip path. That's something @GreenSock would have to answer.
  9. I really wasn't interested in what that function does. I would recommend starting over with your own code so you know how everything works. You don't rotate each individual div. You rotate the outer div. As an item reaches the top, you change it's z-index. Here are some demos that might help you get started. They don't change the z-index, but it would be done in a onDrag callback for the draggable instance.
  10. A timeline would be best. So you could do something like this, and they will play sequentially. var tl = new TimelineMax() .to(polyline, 1, { attr: { points: pointsForKF1 }}) .to(polyline, 1, { attr: { points: pointsForKF2 }}) .to(polyline, 1, { attr: { points: pointsForKF3 }}) If you need help, try putting what you have in demo.
  11. What does this do? function af(aE, aB, aD) { aB = aB % 360; if (aB < 0) { aB = aB + 360 } aE.pos = aB; if (aB > 190 && aB < 350) { if (aE.use == 0 || aE.item == null) { aE.use = 1; var aC; if (aD < 18) { aC = o(aD + a, ao) } else { aC = o(aD - c + a, ao) } aE.cur = aC; aE.item = au(aD, aC) } if (aE.item != null) { ap(aE.item, aB) } } else { if (aE.use == 1) { aE.use = 0; if (aE.item != null) { aE.item.use = 0; aE.item.bg = -1; B(aE.item); aE.item = null } } } }
  12. SumblimeText is a text editor, so it won't be able to do a lot of that stuff. And all the people who made plugins for ST are now using VS Code. Just give it a test drive.
  13. About the parentheses comment in your code, they can be omitted if you're not passing anything in to the constructor. // valid, but looks odd to me var tl = new TimelineMax; And using bind on a object like I showed you could be done differently. If you need multiple instances of something, make a factory function, a function that will return an instance for you. About the staggerTween. Try logging out the target. You're using jQuery, so the target is going to be a jQuery object. So using the target in your update function is the same as doing this. You're updating every element inside that jQuery object at the same time. TweenMax.set([element1, element2, element3, element4], { ... }) Where did the customColor go? GSAP knows you're targeting an element, so it's going to tween the customColor as a CSS property. It's not a valid CSS property, so you won't see inline, but it will be on the element's style object. For a non-stagger tween, this would work. It will put the customColor on the actual element. TweenMax.fromTo(".box", 1, { autoCSS: false, colorProps: { customColor: "green" } }, { autoCSS: false, colorProps: { customColor: "red" }, onUpdate: function() { TweenMax.set(this.target, { backgroundColor: this.target[0].customColor }); } }) Overkill? Since you like experimenting, try playing around with using getters / setters. Did you see this post I made? And check out these articles... http://lea.verou.me/2015/04/idea-extending-native-dom-prototypes-without-collisions/ https://www.sellarafaeli.com/blog/native_javascript_data_binding What going on here? Object.defineProperty(HTMLElement.prototype, "reneClipPath", { get: function() { return this._reneClipPath; }, set: function(value) { this._reneClipPath = value; this.style.clipPath = value; }, configurable: true });
  14. It's good to experiment! I have to ask, what do you use for editing code? I think most of your reasons for trying to stay in the timeline wouldn't exist if you used a better editor. One that understands your code and can do refactoring, like VS Code or WebStorm. VS Code is free, so go download that and try some of these things out. Hover over something. It will tell you what it is. Adding TypeScript definitions will make it even smarter. Rename something using F2. It will change the name of everything that references that symbol. This is not the same thing as find and replace, as that will replace everything that matches. Press F12 to jump to where something is defined. Forgot what generic is, or want to change it? Press Option+F12 to peek at its definition. This will open up a mini-editor, allowing you to see and edit it. No more scrolling I'll answer your questions in another post.
  15. Did you buy GSAP just for that effect? You can certainly use GSAP to animate a fountain effect using one of the physics plugins, but you're going to have to use canvas if you want to move that many particles around the screen. Using HTML or SVG just won't be fast enough for anything more than a couple hundred particles. That demo has 1,000 particles.