OSUblake last won the day on January 14

OSUblake had the most liked content!

OSUblake

Moderators
  • Content count

    3,158
  • Joined

  • Last visited

  • Days Won

    317

OSUblake last won the day on January 14

OSUblake had the most liked content!

Community Reputation

6,288 Superhero

About OSUblake

  • Rank
    Moderator

Profile Information

  • Gender
    Not Telling

Recent Profile Visitors

13,858 profile views
  1. First click doesn't trigger sub item animation

    There is no width here. var anchoMenu = -elMenu.width(); $("li").css("transform", "matrix(1, 0, 0, 1," + anchoMenu + ", 0"); And it would be better to let GSAP handle setting the transform if you're going to animate it. elMenu.css("width", "100%"); var anchoMenu = -elMenu.width(); elMenu.css("width", 0); TweenLite.set(lineas, { x: anchoMenu });
  2. Hehe. Yeah, your planet is wiggling because you're animating the width. If you rework it to use scale instead, it will be smooth.
  3. Moving Element to a Position's Relative to Container

    It's hard to say without knowing what you're doing, but figuring out the actual offset might be better than messing with the transformOrigin.
  4. Particle Ball

    Hi @cfx GSAP is an animation engine, and does not handle rendering. You could certainly use GSAP to animate the particles in that demo, but you would still need to write all the code to handle the creation and rendering of the particles. In short, the hardest part of that demo is the rendering, and there is no easy way to do something like that. The amount of code would probably be the same if GSAP was used to handle the animations. The biggest problem I see with that demo is that it's using a 2d canvas to do 3d rendering. It's doable, but far from optimized. It would be much easier, and faster to create something like that using three.js. Once you have something that can be rendered in three.js, it's very easy to animate it using GSAP. https://threejs.org/ https://github.com/mrdoob/three.js
  5. Modify class of element while being dragged

    You need to think about what the loop is doing. It's running a hit test on EVERY element, so adding a class will only remain if the last hit test you run is true. If you drag something over the first element, you'll see that your code works. The loop is running backwards, so the first element is the last one you hit test. To fix the problem, you need to stop running the loop on the first hit test that is true. You can stop a loop by using a break statement. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/break
  6. I thought your circle based camera was pretty creative. Unfortunately, it won't for every situation. Understanding how the camera I made is pretty simple. There are 3 components that you need to deal with. The viewport. The viewable area. What you can see. Basically a container, with overflow: hidden on it. The world. It should be larger than the viewport, and is the parent container for everything. The target. What you want to follow. It moves around the world. And the rest is basically just knowing how to center a rectangle inside another rectangle. For those that don't, or need a refresher... // Coordinates to center the smallBox inside the bigBox var x = bigBox.width / 2 - smallBox.width / 2; var y = bigBox.height / 2 - smallBox.height / 2; // Or even simpler var x = (bigBox.width - smallBox.width) / 2; var y = (bigBox.height - smallBox.height) / 2; We want the target to remain in the center of the viewport, so every time it moves, we'll need to update the camera. So start off by figuring out the coordinates to center it, just like above. The target is moving around the world, so we can't move the target to those coordinates. Rather, we need to find out how far away the target is away from those coordinates, and then move the world by that difference. That will move the target into place, and now you have a functioning camera! var x = (viewport.width - target.width) / 2; var y = (viewport.height - target.height) / 2; var dx = x - target.x; var dy = y - target.y; world.x += dx; world.y += dy;
  7. Gsap animation waves and distorsions

    What makes you think animating something on hover would be hard? You can do some interesting stuff with SVG filters, but there's only a handful of them, and they can suffer visually due to aliasing issues. I made that ripple animation with SVG just to see how it would look, but it was originally done with PixiJS. If you're looking to bend, twist, and distort stuff for an animation, then you should definitely check out PixiJS. They have tons of filters that can do all sorts of craziness, and they're constantly adding new ones. I just noticed some new ones have been added over the past couple of weeks. 💥 AdjustmentFilter 💥 CRTFilter 💥 GlitchFilter 💥 ReflectionFilter 💥 KawaseBlurFilter 💥 RadialBlurFilter 💥 MotionBlurFilter 💥 OldFilmFilter Go through and play around with all the filters here. You should be able to find several filters that could be used for your project. http://pixijs.io/pixi-filters/tools/demo/ And to help out, GSAP has a plugin to make animating things in PixiJS much easier.
  8. setting perspective ignores z-Index

    They still have a tool for Shaders... and even one for canvas, which I found to be really interesting. It's like a slide show, showing how every single thing is drawn on the canvas, one step at a time. And I just found what I remember playing with, but it's no longer available. https://developer.mozilla.org/en-US/docs/Tools/3D_View
  9. setting perspective ignores z-Index

    I remember playing with one in Firefox a couple of years ago, but I can't find it anymore. Not sure if they removed it, or I just can't find it. And I hear ya on Firefox. I really love the way it's looking these days, but it's performance is really bad on my graphics card for some reason. Not sure what the issue is, but it's an artifact factory. If and when that gets resolved, I would like to start using it more.
  10. setting perspective ignores z-Index

    In case you didn't see my post, I added a little tip about being able to view stacking contexts with Chrome's dev tools. I just noticed it a couple of weeks ago, so I don't think it's visible by default. If you don't see a tab for it, you might have to click on the more options icon in the right corner > More tools > Layers.
  11. Tween to svg object

    Here you go.
  12. Tween to svg object

    Hi @huwllewellyn You wouldn't be banging on your head on the wall had you looked at the pinned SVG Gotchas! thread. Everything you need to know about getBBox is right here, including a helper function that does exactly what you want. Give me a minute, and I'll show you how to use it in your demo.
  13. IDE for using GreenSock?

    Hi @RedUndies GSAP doesn't have a developer environment, but you can use it inside pretty much any environment that can run JavaScript, like Adobe Animate. I use several different products from Microsoft and JetBrains. The one I use the most is Visual Studio IDE, but I can't recommend that for most people as it can take some time to learn. What I can highly recommend is Visual Studio Code (VS Code). It's smart, lightweight, and much easier to get started with. And I have no way to verify this, but it seems to be the most popular code editor among front-end/web developers. It also has a ton of really useful extensions, which you can check out here. https://marketplace.visualstudio.com/vscode WebStorm / PhpStorm is another great IDE, but it's not free. And to tie everything together, I would recommend installing some type of live-reloading development server, like BrowserSync. This will allow you to load up your project on multiple devices, and it will automatically refresh/reload the page whenever you make changes to a file, just like on CodePen.
  14. fullpage and gsap animation

    Hi @ArmYourselves Check out this thread.
  15. how show tweenmax.js from local if cdn fail?

    Fetch is good, but it's asynchronous. The document.write method is solid as it will continue to load your scripts and other stuff in your html in the correct order. You could also do that to fallback to another CDN. Have you tried jsDelivr? I think it's much better than cdnjs. https://www.jsdelivr.com