OSUblake last won the day on November 13

OSUblake had the most liked content!

OSUblake

Moderators
  • Content count

    2,922
  • Joined

  • Last visited

  • Days Won

    291

OSUblake last won the day on November 13

OSUblake had the most liked content!

Community Reputation

5,613 Superhero

About OSUblake

  • Rank
    Moderator

Profile Information

  • Gender
    Not Telling

Recent Profile Visitors

13,183 profile views
  1. staggerTo Reconstruct

    Lots of stuff going on there. Maybe the problem is here. Try setting the stagger to a higher value than 0.01. function setOut() { //outro // staggerTo will return a timeline - need to later reconstruct the stagger - see animateFromDb() tl.staggerTo(quoteSplit.words, 0.4, {autoAlpha:0, scale:0, ease:"magneticOut", data:{tweenType: 'staggerTo', staggerTime: 0.2, staggerPosition: `+=${messageDisplayTime}`, staggerDuration: 0.3, params:{autoAlpha:0, scale:0, ease:"magneticOut"}}}, 0.01, `+=${messageDisplayTime}`); }
  2. Colour tween not completing

    Just looking through your code real quick, the only thing that really stands out at the moment is your resize function. You're creating new blocks, but not updating or destroying the old ones. There could be other stuff, but I'll look at it later. In the meantime, here's a good thread about working with canvas and GSAP.
  3. What conflicts? You're creating problems, not solving any. If you want your GSAP stuff to be part of a certain scope, create an object for GreenSockGlobals, like here.
  4. help with Cycle feature

    I didn't see your animation, and made that demo based on what was shown here. You could create a new tween in the setActive/setInactive methods instead of calling play/reverse, and it would work out the same, but that's really not the point. I wasn't trying to show a better way to do your animation, just a different approach for working with animations as the OP was getting confused by the menuId, so I just eliminated it all together.
  5. Changing fontSize

    That's cheating. You're using paths. Chrome kind of ruined it. You have to use will-change, and scale down, not up. One of the 99 problems with will-change is that Chrome does a craptastic job of downsampling, so it starts to looking bad if you scale down too much.
  6. How to import Club plugins with TypeScript

    I didn't forget about you. I'm waiting to hear back on a Vue issue that was discovered in this thread. For some reason, some plugins are being incorrectly imported.
  7. Smooth Page Scroll

    I'm not familiar with ScrollMagic. Does the hook start an animation, like one that plays without scrolling?
  8. I'm not exactly sure what you mean by that. I added the box sizes to the data object because I was showing how you could possibly create everything dynamically. Instead of having of your php create the html for the boxes, you get some JSON data similar to that from your server, and create all the boxes dynamically with JavaScript. There isn't a built-in way to do that with boxes, but it could be done with a little work by snapping to points. You can read more about point snapping and check out some demos here. https://greensock.com/1-20-0
  9. It's looking pretty good. You can check out all the demos and source code for the Foundation HTML5 here. http://lamberta.github.io/html5-animation/ rAF will actually cutout if you switch windows/tabs. But that brings something I just quickly noticed in your code. You don't have to keep calling Date.now(). rAF passes in the time to the function it calls, so you can pass that value into your objects. If you want, here's part of a ticker I use.
  10. Nice! Feel free to post what you have. Are you moving the particle emitter? That demo I posted was just a quick way to demonstrate the concept. I'll try to make a demo for you in the next day or so to you show you how I've been imagining this could work. Gravity isn't just a downward force. Particles and emitters can have their own gravitational fields, repelling and attracting other objects. I was thinking about doing some of that. Here's a demo showing how some of those systems work. http://jarrodoverson.com/static/demos/particleSystem/ And if you want to expand your knowledge on physics and animation, these are two books I refer back to constantly. http://a.co/5zhEEYL http://a.co/hU9qWLl
  11. Sequencing one SVG element's animations

    There are several different ways to workaround animating properties like top, left, bottom, and right. The easiest is probably to just position your element in its end state, and then animate to it using transforms like x and y. That will allow you to use responsive units, like left: 50%, but without any performance penalties.
  12. Stop messing with zoom, and forget everything you know about it. It's a non-standard feature, and it may be removed from a browser at any time. Use scale instead. It does not affect the layout. Zoom is an OLD property from Internet Explorer 5.5, and was used to scale content long before scale transforms became available. That's the best advice you're going to get from here or anywhere else. Follow that demo I made for you. It works. For saving the locations to a database, do it just like you're doing with local storage. If you plan on having multiple people using the app at the same time, I would recommend using a realtime database like Firebase. Otherwise you're going to have to deal with people making changes at the same time. https://firebase.google.com/products/realtime-database/ Here's a draggable demo I made using Firebase. It's completely serverless, so no dealing with programming a back end using something like PHP. Everything is done using JavaScript. Open your browser up in 2 different window to see it update in realtime.
  13. Correct Syntax to remove multiple classes

    There is currently no logic in place to check for individual class names so it must follow the order found by doing this. var className = myElement.getAttribute("class"); Just an FYI, changing class names without jQuery is now pretty easy. Won't work on SVG in IE though. myElement.classList.add("foo", "bar"); myElement.classList.remove("foo", "bar");
  14. Draggable Rotation Clockwise Only

    Looks good! A couple of things I noticed. Everybody messes up on this, but when using Math.atan2(), the y component goes first. You had the x component first, giving you a vertical angle. That's why you had to negate the y component and subtract 90 degrees. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/atan2 How did you come up with this? if (count % 115 === 0) { fullRotation++; } That's not going to work. The change in rotation is not constant, and if you go backwards while that is true, it will keep increasing the fullRotation count. To get the number of full rotations, keep a running total of the forward changes in rotation, and divide by 360. Here's your demo with some of those changes. Didn't know if you wanted the trigger to be a circle or square, but I made a circle and slightly visible just so you can see it. I have some ideas on how to do other parts of your fishing game, but I'll do that it another post tomorrow.
  15. Is there a default x, y of element?

    In general, I find absolutely positioning everything at some common origin, like 0,0, and using gsTransform to navigate and move stuff around to be the best approach. That works really well when using multiple draggables instances, like in a grid. However, that's not always possible, so you will need to use other approaches. I already mentioned how getBoundingClientRect is really reliable, but so are element properties like clientLeft, clientTop, clientWidth, clientHeight, offsetLeft, offsetTop, offsetWidth, offsetHeight. The difference between the client and offset properties aren't that great, so I'll skip that comparison. I made a demo that does some really basic animations, and displays how gsTransform, getBoundingClientRect, and the offset properties are interpreting those changes. Check out how the properties for getBoundingClientRect start to differ from gsTransform when its rotating. That's why I said rotation was a huge gotcha in another post. I would say that everything being displayed there is technically correct, even though their values don't match up. If you're wondering what's up with the offset properties, it's because they don't take into account any transforms. That doesn't make them any less important or inaccurate. In fact, sometimes that's exactly what you want. In that grid demo above, I use offsetLeft and offsetTop for positioning because I know the coordinates won't be affected by any transforms, making it much easier to calculate stuff. And if you like that grid demo, here's another version using SplitText!