OSUblake last won the day on September 19

OSUblake had the most liked content!

OSUblake

Moderators
  • Content count

    3,765
  • Joined

  • Last visited

  • Days Won

    370

OSUblake last won the day on September 19

OSUblake had the most liked content!

Community Reputation

8,283 Superhero

About OSUblake

  • Rank
    Moderator

Profile Information

  • Gender
    Not Telling

Recent Profile Visitors

16,259 profile views
  1. OSUblake

    Animation Lag/Choppiness on Sierra/HighSierra running Chrome

    It's really bad on Windows 10 for me. It's some kind of graphics/GPU issue. You should probably file a bug. I got it working better by rotating the SVG instead of the path, and adding will-change to the CSS, but I still see artifacts on my computer depending on the number rays. 59 and 60 always have rendering issues on my computer.
  2. OSUblake

    Warping background image

    I thought that was a custom shader when I first saw it. I looked at the the source code, and they are using a displacement map, but I noticed a shader in there was commented out. Let's see what it does. 🧐 It's a fragment shader, which runs every pixel through the main function to get it's color. That's what gets set on gl_FragColor. It's an rgba value, but uses values from 0.0 to 1.0 instead of 0 to 255. The uniforms are like the attributes for an SVG filter. That's how you pass values from JavaScript to the shader. precision mediump float; varying vec2 vTextureCoord; uniform sampler2D uSampler; uniform float time; uniform float frequency; uniform float amplitude; uniform float amplitudeY; uniform float speed; void main() { vec2 position = vTextureCoord; float distortion = sin(position.y * frequency + time * speed) * amplitude; float distortion2 = sin(position.y * frequency + time * speed) * amplitudeY; gl_FragColor = texture2D(uSampler, vec2(position.x + distortion, position.y + distortion2)); } To use it, all we need to do is create a new filter and set the uniforms. The time uniform needs to be increased on every tick. The other uniforms can be animated by GSAP. var filter = new PIXI.Filter(null, shaderFrag); filter.uniforms.frequency = 0.0; filter.uniforms.amplitude = 0.0005; filter.uniforms.amplitudeY = 0.0; filter.uniforms.speed = 2.0; filter.uniforms.time = 0.0; myContainer.filters = [filter]; // update time value app.ticker.add(function(delta) { filter.uniforms.time += 0.05 * delta; }); If you couldn't tell from the uniform names, it's a wave filter.
  3. OSUblake

    iOS error reloads webpage when Tweening too much?

    GSAP doesn't do any rendering. It changes values over time. If the value gets correctly set, which it does, then it's not related to GSAP. I think the problem is that you're asking the browser to do too much. Mobile devices are pretty limited when it comes to performance. I'm on a workstation and your animation causes a massive drop in performance during the first couple of seconds, and the layers keep on changing until rotation is the only thing being animated. When you animate something other than transforms, opacity, or a filter, the current raster of the content has to be destroyed, recalculated, rasterized, and uploaded to the GPU, which is slow. left and top are the biggest problems here. z-index is questionable. scale is a transform, but it's also questionable because it causes a repaint if you don't use will-change in certain browsers. {left:'0%', top:'70%', scale:.12, zIndex:5, filter: 'brightness(80%)'} And filters can be slow due to stacking contexts. https://developers.google.com/web/updates/2017/10/animated-blur I would first try switching left and top with x and y, and setting will-change in your CSS. .spaceship { will-change: transform, filter; } Just be aware that will-change can cause problems, and scaling might not look good. https://greensock.com/will-change https://dassur.ma/things/forcing-layers/ If you still have problems, you should look into using canvas.
  4. OSUblake

    Measure centre point of draggable

    Clamp the actual width.
  5. OSUblake

    Again: Playing a (staggered) timeline reverse

    Nice find! Let me tell you about "that". Before arrow functions came along, using "this" was very error prone. "this" inside an inner function is the wrong "this", which is very easy to overlook. var myObject = { colors: ["red", "blue", "green"], doCoolStuff: function() { this.colors.forEach(function(color) { this.logValue(color); // ERROR }); return this; }, logValue: function(value) { console.log(value); } }; myObject.doCoolStuff().doCoolStuff(); To fix it you would have to put "this" in a variable. I would always name it "that", resulting in code that confused everybody. Q. What's that? A. this. Q. What?!? A. It's this! Q. I don't know what that is! var myObject = { colors: ["red", "blue", "green"], doCoolStuff: function() { var that = this; this.colors.forEach(function(color) { that.logValue(color); // WORKS }); return this; }, logValue: function(value) { console.log(value); } }; myObject.doCoolStuff().doCoolStuff();
  6. OSUblake

    Again: Playing a (staggered) timeline reverse

    It's good. That's what I would do. 😀
  7. .getTotalLength() for other shapes like a polyline is part of SVG 2. https://developer.mozilla.org/en-US/docs/Web/API/SVGGeometryElement/getTotalLength And Microsoft is like, meh... it can wait. https://developer.microsoft.com/en-us/microsoft-edge/platform/status/svg2/?q=svg I totally forgot about this. You can get the length using the DrawSVGPlugin. var totalLength = DrawSVGPlugin.getLength(polyline);
  8. Nice job, @PointC I made a demo to show the tile drawn centered at 0,0 and a lot of your code looks like mine. One issue though, .getTotalLength() won't work on a polyline/polygon with browsers from Seattle, so you should convert it to a path. Well maybe a clone so you don't have to deal with messing up the actual polyline points.
  9. OSUblake

    Again: Playing a (staggered) timeline reverse

    Working with 50 timelines wouldn't be hard. I think the problem you might be having is wrapping your head around "this", and that's not uncommon. Everybody struggles with "this", and I do mean everybody. You should look at what "this" is in your component. Vue creates a flattened object from your component code. console.dir(this); You're not calling the allAnims method. A call will have parenthesis after it. It might help if you view your methods without the ES6 syntax. Methods are functions, and you can't add a dot (chaining) after calling a function unless something is returned. Adding your animations to "this" allows you to access them from other methods. methods: { allAnims: function(refs) { this.logoAnimation = refs.Logo.animateLogo().pause(); }, play: function() { this.logoAnimation.play(); }, reverse: function() { this.logoAnimation.reverse(); } }, mounted: function() { this.allAnims(this.$refs); // WORKS this.play(); } https://codesandbox.io/s/3vrnv37rvm
  10. OSUblake

    Again: Playing a (staggered) timeline reverse

    Love this analogy! I'm wondering if it would work with young people.
  11. Here's a tip. Don't position stuff you're going to move where you initially want it. If you drew your tile at 0,0 or centered on 0,0 you could easily move it to a coordinate on your polyline without any issues.
  12. OSUblake

    Again: Playing a (staggered) timeline reverse

    It's being returned, but you're not saving it. Maybe like this. methods: { play() { if (!this.logoAnimation) { this.logoAnimation = this.$refs.Logo.animateLogo(); } else { this.logoAnimation.play(); } }, reverse() { if (this.logoAnimation) { this.logoAnimation.reverse(); } } } https://codesandbox.io/s/p7jj9k977x
  13. OSUblake

    This skew effect when using draggable?

    Here's some pens that you may find useful. These use a proxy element. These track velocity. I used the VelocityTracker.track() method because reasons, but it's the same thing as the ThrowPropsPlugin.track() method.
  14. OSUblake

    Draggable rotate API?

    It's not a bonus file, so you should be able to import it from "gsap/all" or "gsap/ModifersPlugin".
  15. OSUblake

    Animating a svg filter

    Sometimes you have to make sacrifices with animations. Google wrote an article about doing a crossfade blur for better performance. https://developers.google.com/web/updates/2017/10/animated-blur