OSUblake last won the day on January 20

OSUblake had the most liked content!

OSUblake

Moderators
  • Content count

    3,175
  • Joined

  • Last visited

  • Days Won

    318

Everything posted by OSUblake

  1. Scaling parent and child element

    No biggie. You weren't here when this question originally was asked, but welcome back buddy!
  2. Scaling parent and child element

    That's what @Sahil originally did. See my post about the ExpoScaleEase above, and the thread it links to. It should work the same, and I was only suggesting it as another use case so it can be added to the GSAP library. My guess is that it would perform better than manually calculating the scale on every update.
  3. Scaling parent and child element

    I'm not sure I understand what the problem is. This works.
  4. Scaling parent and child element

    And that's why I would recommend writing code vertically. It's easier to read, comment out, and spot errors like how onUpdate does not belong in the ExpoScaleEase.
  5. Callback Scope defintions

    Hi @shaunhurley The callback system for Draggable works just like the one TweenLite/Max and TimelineLite/Max. If figuring out how to set the scope isn't obvious, then it's probably due to how your code is written. My guess is that you're doing something like this, which is what all the examples in the docs do. There is a way to set the callback scope to the target when you create draggables like that, but I'm not going to get into that because it requires more work. Draggable.create(".elements", { ... }); To set the callback scope to the target, you should be working at the element level, creating one draggable at a time. This may require you to use some sort of loop if you want to create more than one. var draggable = new Draggable(theElement, { throwProps: true, onThrowComplete: update onThrowCompleteScope: theElement }); And knowing how to bind a function can simplify how you define callbacks in GSAP, or any library for the matter. Consider the following. You want to use a scoped callback for different actions, and want to pass in a couple of parameters to that callback. Pretty messy, right? var animation = TweenLite.to(theElement, 1, { onUpdate: update, onUpdateParams: [100, 500], onUpdateScope: theElement, ... }); var draggable = new Draggable(theElement, { throwProps: true, onDrag: update, onDragParams: [100, 500], onDragScope: theElement, onThrowUpdate: update, onThrowUpdateParams: [100, 500], onThrowUpdateScope: theElement }); function update(min, max) { console.log("this", this); // => theElement console.log("min", min); // => 100 console.log("max", max); // => 500 } Instead of specifying each scope separately, you can use "callbackScope", but it's still kind of messy. We were only able to get rid of 1 line of code. var animation = TweenLite.to(theElement, 1, { onUpdate: update, onUpdateParams: [100, 500], callbackScope: theElement, ... }); var draggable = new Draggable(theElement, { throwProps: true, onDrag: update, onDragParams: [100, 500], onThrowUpdate: update, onThrowUpdateParams: [100, 500], callbackScope: theElement }); This is where creating a bound function might be useful. You can combine everything into a single, reusable function. The first parameter is the scope. Any additional parameters will be passed into the callback. var boundUpdate = update.bind(theElement, 100, 500); var animation = TweenLite.to(theElement, 1, { onUpdate: boundUpdate, ... }); var draggable = new Draggable(theElement, { throwProps: true, onDrag: boundUpdate, onThrowUpdate: boundUpdate }); Much, MUCH cleaner!
  6. Over 400 svg elements performance

    Your monitor is a bitmap display, so everything is converted to a bitmap at some point. SVG are resolution independent because the browser automatically redraws the SVG as a bitmap every time its size changes. We can do the same thing with canvas, but the redrawing doesn't happen automatically, which can help with performance. So you'll still be able resize it, but it's not something that needs to be done 60 times/second.
  7. Over 400 svg elements performance

    Yep. When drawing on canvas, everything gets converted to a bitmap. But's done internally, so you don't need to worry about that. Before loading your SVG into pixi, you just need to loop through all the different elements you want to want use, record their bounds, and pass that into pixi so it can map out where everything is located on the bitmap.
  8. Over 400 svg elements performance

    Hi @kaliel Since you're not animating anything that would require an element to be redrawn, converting this over to PixiJS would be pretty easy. You're SVG could be used like a sprite sheet, which is good. 1 graphic is much better than 400+ graphics. I can show how to do that later, but you'll be able to animate 10,000 objects without skipping a beat. Press down to add more bees. That's running without using a particle container, which would make it even faster.
  9. Tweening the hue in hsl colours

    Only in Chrome
  10. Tweening the hue in hsl colours

    I don't see that working either. Just a bunch of errors in console.
  11. Tweening the hue in hsl colours

    Sorry, but the code you posted makes sense to you, and only you. There is no way for anybody to know what's going on, or what you're having trouble with without more context. That is why you were asked on multiple occasions to provide a demo. It's not because we're curious, and want to see what you're working on. It's because we can't help you fix a problem if we don't see one. TweenLite.to(initial, speed, { value: valueh, onUpdate: function () { target.material.color.setHSL( 'what goes here?', 1, 0.5 ); }, onComplete: function() { //if colourcounter equals 3 if (colourcounter == 3) { //reset colourcounter colourcounter = 0; } else { //increment colourcounter colourcounter++; } //allow next animation colouranimation = 0; } }); What is initial? Could be anything. Same thing with valueh. And what about colourcounter, clourcounter, or colouranimation? And what does changing those values even do? Those are all unknowns to us. So not knowing what those values are, or where they are coming from, I provided a very simple example of how to tween and set an hsl color. I used 'h: 1' and 'color.h' because that is the property of the hsl object returned by calling getHSL, so that is the property that needs to be tweened. I can't tween a "value" property if it doesn't exist. I clearly showed how I was getting the hsl color object, so I'm not sure why that was confusing. As to why I used TweenMax instead of TweenLite, it's because I copied and pasted the tween from Dipscom's demo into the post, and edited there. You didn't ask Dipscom about why he was using TweenMax, so I'm assumed you knew the difference. For what you're trying to do, there is no difference. TweenMax is TweenLite, but with some extra methods. Sorry if that confused you. So after posting that example is when I noticed you posted some links to your code, but it was still hard to understand because you're using global values that are split up across different files. I copied as much of the needed functionality from your code into a fork of Dipscom's demo, and showed how to tween and set an hsl value. Did that not help? I'm using the same ip values from your demo, so it works. The only thing I couldn't figure from your code is what the onComplete callback does, so I just made it recursively call the colourTo function again to keep the animation going. I don't know why you're having trouble with GSAP and Three.js, but there shouldn't be any problems. My guess is it's something you're doing with three.js, or with some data your using. Put what you have on plnkr, and we can take a look at it for you. It shouldn't be that hard to figure out where the problem is coming from.
  12. Tweening the hue in hsl colours

    Yeah, I noticed that too, that's why I posted the link instead. It's @Dipscom code, so I'm not sure what the issue is... Oh, found it. @Dipscom When using JS from another Codepen file, delete all the options from the url (from the ?), and add a .js extension. https://codepen.io/dipscom/pen/peVzVz.js
  13. Tweening the hue in hsl colours

    And I provided you with a correct answer. Did you even try it? I already know the answer to that. All I needed was a simple demo to see what you were doing, and that I could edit in a live environment.
  14. WAAPI-Powered GSAP? Unlikely

    Hehe. Searching for CSS Houdini doesn't bring up a lot of results, so after a few pages, most of the results are about that, and after that, the results are about the magician. And that's where the name comes from. It allows you to tap into the magic of Styling and Layout on the web. @Dipscom Before I forget, here's a good web worker demo, which is just like a worklet. Get the number of objects up to 5-10,00, and then toggle the workers to see the performance difference. @Sahil I saw your question. I was going to respond back later on with some more stuff.
  15. Tweening the hue in hsl colours

    Just tween the color object. If you need any more help, please make a demo. var color = material.color.getHSL() TweenMax.to(color, 5, { h: 1, onUpdate() { material.color.setHSL(color.h, color.s, color.l) } })
  16. Hi @Susan I would look at using functions to keep your code organized, reusable, and configurable. Don't know if you had a chance to look at those videos that @Sahil shared with you, but that's what these ones go over.
  17. setTween Should be centered on pageload

    Nothing wrong with sharing some CSS tips. I'm sure we can all agree that...
  18. GSAP: 1000 Posts

    That is so awesome! Watching a microwave counting down will never be same again.
  19. Oh yeah. IE doesn't have a Promise. Just include this script to get a polyfill for the Promise, and you should be good. It's using the polyfill.io service. <script src="https://cdn.polyfill.io/v2/polyfill.js?features=Promise"></script> What I made should be pretty easy to extend, but if you need any help, just let me know.
  20. WAAPI-Powered GSAP? Unlikely

    I don't think so. About the only thing a WAAPI timeline has in common with a GSAP timeline is the name. All I can say is that you should give it a test drive. If you like creating CSS animations keyframes, and are familiar with CSS animation terminology and properties, you'll like WAAPI. Now don't get me wrong, I would actually like to see @GreenSock add something like keyframes to GSAP, I've just never asked for it. It would be really helpful for situations that otherwise might require you tween the progress of a timeline with another animation, but I certainly wouldn't want to use keyframes as the basis for all my animations. Weren't you the one that brought up cargo cult programming? As WAAPI becomes more widespread, it's going to be like 2013 all over again. But instead of people saying that CSS animations are better than JS animations, the mantra will be that CSS and WAAPI animations are better than JS animations. Why? Because that's what some performance gurus over at Google said, and they know what they're talking about. And some of the stuff I've read on Twitter and Medium is also pretty convincing. I mean, just look at this comparison. This is what happens when the browser is busy, which apparently happens all the time. The JS animation on the left is all jank, while the WAAPI animation on the right doesn't skip a beat. Amazing! Don't believe me? See for yourself. I spent a lot of time coming up with an algorithm that accurately simulates how a normal site behaves. That demo says all that needs to said. WAAPI is clearly better. No further testing is required. Oh wait... a challenger appears. It's called "Something other than transforms or alpha". Oh how the tables have turned! Turns out that WAAPI is indeed susceptible to jank. Not only that, but the jank can be magnified if the animation gets out of sync, looking like a video game with really bad collision detection, glitching through walls and stuff. So locking the browser up to show how jank affects JavaScript animations is just stupid, and can actually disprove what you're were trying to prove. Besides, if your site really has that much jank, then one or more of the following must be true. You're not a good developer or just starting out. You're scroll jacking the interface. See previous point. You're creating a WordPress site and just discovered themes and plugins. See first point. You're viewing a demo showing how JavaScript animations are affected by jank. You're using IE6 with 40 different custom search bars while running BonziBuddy. So all those demos and articles that talk about the performance benefit of WAAPI are not entirely true. WAAPI only performs better when it's being demonstrated using cherry picked conditions. There are like several hundred different CSS properties that can be animated. To say that you should only animate transforms, alpha, and a couple filters is crazy! That's sounds more like a coding challenge. And what about SVG? Should we just ignore that all together? I think not.
  21. And I'd be curious to see where you got that snippet from if you can remember. To be honest, I have never seen an animation structured like that. Not saying it's wrong, or bad, just different. It took me a few minutes to understand what was going on.
  22. Hi @Marv As soon as you set the src of an image, it starts loading. You're setting the onload event after you set the src, so if it's the image is cached, the onload can get screwy, or might not even fire. So always set the src last. var img = new Image() img.onload = onLoad; img.onerror = onError; img.src = path; There were also some other issues getting your images using http. On Codepen, you have to use https. For preloading images, using promises works well. loadTextures(50) .then(function(images) { console.log("Here be your images", images); }) .catch(function(error) { console.log(error); }) function loadTextures(numTextures) { var promises = []; for (var i = 1; i <= numTextures; i++) { promises.push(loadTexture("some-path")); } return Promise.all(promises); } function loadTexture(path) { return new Promise(function(resolve, reject) { var img = new Image(); img.onload = function() { resolve(img); } img.onerror = function() { reject("Error loading " + path); }; img.src = path; // Setting the src last }); } And for this, why not use canvas. You're already naming your elements that, so why not use the real thing?
  23. I've been wondering what you guys were trying to do. Every demo here looks so FUBAR!!! All the demos here are using an old version of GSAP, 1.18.0. GSAP is applying a 3D matrix to the element's inline style, which is causing a conflict if the Experimental Web Platform feature is enabled in Chrome or Opera. Updating to the latest version of GSAP fixes the problem. It correctly applies a 2d matrix to the transform attribute. It took me forever to figure that out.
  24. requestAnimationFrame vs throttle

    Looks good. I was using rAF as "in general" statement, so that's fine for resizing. Resizing really doesn't need to be called 60 times a second, like with mouse or scroll events, so it's ok to have a longer delay. And I didn't know my demo was up on Codepen. I didn't make those images. I think they're from this site. They change them every year. https://ozorafestival.eu/
  25. Tweening the hue in hsl colours

    Yeah, a demo would help. One thing I noticed is that you're getting the hex value, which will look different than hsl when animating. Doesn't three.js have a .getHSL method?