OSUblake last won the day on April 16

OSUblake had the most liked content!

OSUblake

Moderators
  • Content count

    3,479
  • Joined

  • Last visited

  • Days Won

    339

Everything posted by OSUblake

  1. Performance and Visual Optimizations

    While not a benchmark, you can look at the source code and see the difference. A from tween is the same thing, but it adds runBackwards and immediateRender to the vars. TweenLite.to = function(target, duration, vars) { return new TweenLite(target, duration, vars); }; TweenLite.from = function(target, duration, vars) { vars.runBackwards = true; vars.immediateRender = (vars.immediateRender != false); return new TweenLite(target, duration, vars); };
  2. FLIP with GSAP?

    The progress trick can help out with the start of animation. There can be a little stutter the first time you play an animation. It usually only happens with long or complicated timelines, but if you have a bunch of animations going on at the same time, then the stutter is likely to be more noticeable. So it can help out, but at the same time, doing the progress trick can cause a stutter if you do it when there are a lot of animations going on. You kind of just have to play around and see.
  3. How to make Website like this?

    That was kind of the point. Asking how to make a site is very ambiguous, and could take hours to deconstruct. If you asked how they did a certain animation, then it would be easier to tell you something more concrete, or even provide you with a demo. But it sounds like you figured it out, so more power to you.
  4. How can I write more concise and efficient Tweens?

    Congratulations! I've made everyone in this thread an honorary member of my "You Might Not Need ScrollMagic" club. This is pretty much all ScrollMagic does. Yes, I've looked at the source code. And the problem with ScrollMagic pins.
  5. FLIP with GSAP?

    Yes, I think we worked it out. Sometimes it's very hard to see the point of a FLIP animation, and it shouldn't be used for every animation. It's really only useful for when the DOM has changed, and you don't know what the end values are. Once you figure out what the end values are, you could do a regular .to() tween, but if the DOM changes during the animation, then it might jump at the end. TweenLite.to(element, 1, { x: 300, y: 200, scale: 2 }); The invert step helps fix that problem, so you end up with an animation that looks more like this. TweenLite.fromTo(element, 1, { x: -300, y: -200, scale: 0.5 }, { x: 0, y: 0, scale: 1 });
  6. How to make Website like this?

    Baby steps. That's how. I know you don't want to hear that, but making a site like that will not read like the recipe to baking a cake. That site uses framework-X, so if you use framework-X you should be be able do the same thing. That site is obviously made by a team of developers who have years of experience. I'm sure they could have a used a completely different set of tools and would still end up with the same result. It's not about what you're using, but how you use it. Start out small and build on that knowledge. That's the best advice I can give. There is no way to fast-track building a site like that.
  7. Get element position X Y

    Dealing with coordinates inside an SVG is complicated, especially if the SVG has a viewBox. I wrote this script to help get the transformed bounds of SVG elements. That's commonly known as an axis-aligned bounding box, or AABB.
  8. FLIP with GSAP?

    And yes, I do understand the point you were making about precaluclating values for better performance. I would never argue that that is a bad thing. I was talking about the actual inverting of an animation, which is what @jesper.landberg was probably asking about because that is what it looks like he is trying to do in this post. That is very similar to the video animation I did in the post that @Sahil linked to.
  9. FLIP with GSAP?

    Well I still love ya too. That's why I said I'm done... with this thread, not with GSAP. I don't want to get into an argument and say something that I can't take back.
  10. FLIP with GSAP?

    I can't do this anymore. I'm done.
  11. FLIP with GSAP?

    Why did Paul Lewis make a GSAP helper for FLIP? https://github.com/googlearchive/flipjs/blob/master/src/gsap.js And why does this code code look very close to what I posted above? if (this.updateTransform_) { Object.assign(options, { scaleX: 1, scaleY: 1, x: 0, y: 0}); } FLIP animations are not new to me. I have been doing them for several years, and I realize that at face value they might look like a regular animation, but they aren't. Look at those Flexbox animations I linked to. There is simply no other way to do them other than with a FLIP-like animation technique.
  12. FLIP with GSAP?

    You are taking that definition completely out of context and applying it to some trick that Jack showed you. Yes, I know about that progress trick. That is not the flip technique. Can somebody else please verify what I'm saying? I'm really losing my mind having to re-explain this all over again.
  13. scale messing up my y translation

    getBoundingClientRect includes transforms. Sometimes it's better to use offfsetLeft/Top/Width/Height. And if scale is involved, you should probably animate the x/y values from the center instead of the top/left corner. Basically, calculate the x/y values based on where the transform origin is. By default, it's at the center for HTML elements.
  14. FLIP with GSAP?

    I had a horrible time getting my point across in that thread. Please don't make me do it again. Changing the progress of a GSAP animation has nothing to do with the FLIP technique. A FLIP animation should always look the same. We are animating to an identity matrix. That's because we are already in the end state. There's a big difference between transitioning to a new state, and transitioning from a previous state. The underlying values are different, which makes a FLIP animation very hard to break. TweenMax.to(element, 1, { x: 0, y: 0, scale: 1 }) Please look at the many posts I've made about animating Flexbox. I may not have used the term "FLIP", but it's still doing the same thing.
  15. Changing draggable direction mid-drag?

    Here's another example. Corners can be a little tricky, so I give them a little wiggle room.
  16. Changing draggable direction mid-drag?

    You can do that using a liveSnap function. Check out how you can use it with points. https://greensock.com/1-20-0 @GreenSock This demo is broke. Need to add a comma after the type.
  17. Greensock in Flutter

    I've seen Dart to JS, but can it work the other way around, JS to Dart?
  18. Responsive tweens with function-based values

    I don't know if there is a reason to avoid them. From a styling point of view they're safe to use because CSS just skips stuff it doesn't understand. .foo { background-color: green; // fallback background-color: var(--myColor); } IE is the only browser that doesn't support them, so the animation won't work, but it won't throw an error. But I would just disable all the animations in IE. Don't worry, your client won't check.
  19. Input range slider

    Such an old but good thread. I really should make a new version of that slider. Look at how I'm changing the positioning in the setAbsolute/setRelative functions here.
  20. Responsive tweens with function-based values

    And I see some new experiments have been added. I love this one. https://lab.iamvdo.me/houdini/random-bubbles-mask EDIT: Actually, you might have to wait a couple of more versions to see that, or enable experimental web platform features in Chrome or Opera. Copy and paste this in your address bar. about://flags/#enable-experimental-web-platform-features
  21. Responsive tweens with function-based values

    Sort of new, but a variable in preprocessor doesn't work the same way because they are static and cannot be changed at runtime. https://greensock.com/css-variables And if you want to see the future, fire up Chrome and check out these experiments. Chrome needs to be version 65 or higher. https://lab.iamvdo.me/houdini/background-properties
  22. Element sizing with className & height:auto

    Correction. You think you fixed it. As @Jonathan likes to say, "If you make it, they will break it!", so I broke it. It doesn't work with concurrent animations. Your syntax will throw a bunch of errors. And specificity matters when using className tweens. The desired result is a 300 x 300 box with a red background. I was making the distinction because I wasn't referring to Angular1 in my original comment. There's a lot of controversy over the naming and versioning, like why is there no Angular3, but they did that because "Angular" is a brand with a lot of name recognition, and they didn't want to kill it off. What they decided is that Angular1 will be AngularJS, and Angular 2+ versions be Angular. They are two completely different products, and even have different wikipedia pages. You're thinking of a stateless component, and they don't do anything special. You don't even need React for that. Don't be so quick to jump to incorrect conclusions. This is real easy. <!-- Import it --> <script src="webcomponents-polyfill.js"></script> <link rel="import" href="some-component.html"> <!-- Ta-da! --> <some-component></some-component> I don't know what you were looking at, but that site is a public repository of web components, and if you didn't see any documentation, then the developer probably didn't make any. That wouldn't be the first time a developer released something without a README. This is how most of them will look. https://www.webcomponents.org/element/PolymerElements/paper-button See the Export link on the example, that will open it in jsfiddle. Now look at the "Elements" section on the left, and click on the <paper-button> link. That looks like pretty good documentation to me. https://www.webcomponents.org/element/PolymerElements/paper-button/elements/paper-button And MDN has a lot of good documentation on how to work with web components. https://developer.mozilla.org/en-US/docs/Web/Web_Components Now why would I do that? My responses may be directed at you, but this a public forum, and this topic will end being viewed by thousands of other people. If you don't, I'm sure somebody else will find value in what I've posted. Oops! I broke it. Click on the video while it's animating.
  23. Element sizing with className & height:auto

    How can you disagree with that when you're already experiencing difficulty? That kind of proves my point. Angular1 has nothing in common with the current version besides the name. But what I was trying to get at is that there's a bunch different ways to create and customize CSS for theming, usually with some type of build process. This isn't directly related to CSS styling, and is more for SVG, but look at how easily an animation can be added to an app. There are similar tools for styling components just like that, but I can't remember the names of them right now. A component is more of an architecture or pattern. Web Components and Polymer are where you'll find most of the widget stuff. I'm not a UA developer, so I don't know a lot about the specs, but animating width and height has nothing to do with them. It invalidates the layout, and has to recalculate the size and position of everything and make any necessary adjustments, which can kill your framerate. It's no different than doing a screen resize. This is unlike transforms, which cannot affect other elements or the layout. Nope. I know how that app works, and it doesn't use a library. Go back to that site, disconnect from the internet, and then refresh the page. It should be working offline. The lag you saw was because it was your first time visiting the page, so a service worker was fired up to install some stuff for offline use. Well I didn't coin that term. That was done by Paul Lewis over at Google. I learned a different version, called a Relative Animation, which might be a better description, but nobody knows what that is, so I don't use it anymore. Every animation in GSAP has a start and end value, so there's nothing unusual there. In the Last step is where you would apply or remove any CSS classes/styling. You put the element in it's end state. The Play step really doesn't apply to GSAP as it will automatically play. That's more for people who have to manually start the animation. And this is where you get everything wrong. There's a time difference between screen refreshes, typically around 16.67ms, so you won't see it change visually. The invert step is the most important part, and is what pulls everything together, but you're not seeing the big picture yet because you think it can be done with className tweens. Can you get these two animations working correctly using className tweens? The video should not jump around when you toggle it. It's using the same CSS and layout from the original demo. This should animate between a column and row when you hover over it. And yes, there is a way to animate it. I'll explain more about this in another post.
  24. animating css transform stutters on first execution

    Don't forget about filters. will-change can be a huge optimization for filters that do convolution like blur and drop shadow. And I don't know what's going on with these demos, but it's creating some weird glitches on my computer. Look at how the code is glitching, and starts spazzing out.
  25. Element sizing with className & height:auto

    Trying to build a complicated UI library using only className tweens will be difficult. My advice would be to avoid them. They're really not that useful, and can cause all sorts of problems if you're not careful. If you really want to animate classes, then you should use CSS. You might want to look into how modern frameworks like React, Vue, and Angular use css, or the lack thereof. CSS in JavaScript is pretty common nowadays, making CSS files completely optional. Animating properties like height and padding aren't any better. Look at what animating height triggers. https://csstriggers.com/height The browser spends a lot of time rendering a nice looking web page for you, and then on every animation frame you come along and destroy it. That makes the browser sad. 😢 To make the browser happy you'll need to leverage transforms. Instead of changing the width or height on every animation frame, you can reduce it down to 3 layouts/reflows using a technique called FLIP. First - Record the initial state of your element, like its position and dimensions. Last - Move your element into its final state, and record those values. Invert - Now move your element back to where it came from. You now know all the values that will be needed for a transform based animation. Play - Play the animation. The browser will go back to being happy again. I came across a couple FLIP animations that I though were pretty neat, and wanted to make them with GSAP. What I ended up with was the start of what could be a nice library for doing FLIP animations with GSAP. It's pretty easy. Just pass in the elements you want to animate, a modifier function, and some animation options. The modifier function is just a function that will change the element in someway, like toggling a class, or moving it somewhere else in the DOM. var video = document.querySelector("#video"); Flipper.flip(video, videoModifier, { duration: 0.5, ease: Sine.easeInOut }); function videoModifier() { video.classList.toggle("minimized"); } There are no width or height animations in this demo. It's all done with scaling. I'm making use of the new ExpoScaleEase for counter-scaling. Good idea? This is something I might be interested in making into a library if there's demand for it.