OSUblake last won the day on November 10

OSUblake had the most liked content!

OSUblake

Moderators
  • Content Count

    3,870
  • Joined

  • Last visited

  • Days Won

    390

Everything posted by OSUblake

  1. OSUblake

    Angular 6 --build-optimizer fails to find TweenMax

    It isn't? Then why are you having problems importing GSAP modules? 😉 This is at the bottom of the Draggable UMD file. I think it was written before bundling tools like webpack became popular. //export to AMD/RequireJS and CommonJS/Node (precursor to full modular build system coming at a later date) I have no idea what's going on with the AOT compiler. It looks really complicated. https://angular.io/guide/aot-compiler Are you getting this error? Cannot set property _autoActivated' of undefined There's only 1 file where that would happen, but I don't know what would cause the import to fail. https://github.com/greensock/GreenSock-JS/blob/master/src/esm/TweenMax.js If you're getting that error, that means you're importing from "gsap" or "gsap/TweenMax", which I wouldn't recommend. https://greensock.com/docs/NPMUsage https://greensock.com/forums/topic/18437-import-from-gsap-vs-from-gsapall/ If tree shaking is enabled import { TweenMax, CSSPlugin } from "gsap/all"; const plugins = [CSSPlugin]; Else import "gsap/TweenMaxBase"; import "gsap/CSSPlugin"; If that doesn't work, you can add GSAP files via the scripts option inside the angular.json file. https://github.com/angular/angular-cli/wiki/stories-global-scripts
  2. OSUblake

    onComplete is called before animation is complete

    I see the lag, but what makes you think that onComplete is firing prematurely? I noticed that you're using React, and that works asynchronously, meaning updates can be an issue if you're not careful. That's why there's a .componentDidUpdate() method. But like Jack said, that should never happen. I made this demo to show the callback order and the position of the boxes. I also noticed you're using timing mechanisms like setTimeout and _.defer. That can also cause problems if you're not careful. To see what I mean, open this animation, go to another tab for like 5-10 minutes, and then go back to the animation. It's been shooting off but not animating a bunch of fireworks the whole time you were on another tab because setTimeout is not synced with animation frame updates. https://codepen.io/rachsmith/pen/YNKVxG I would recommend using TweenLite.delayedCall() instead. It's driven by GSAP's ticker, so it will keep everything synced, even if you go to another tab. https://greensock.com/docs/TweenLite/static.delayedCall()
  3. OSUblake

    onComplete is called before animation is complete

    Please make a reduced test case.
  4. OSUblake

    isActive() problems with mouseenter

    Hi @ainsley_clark Your issue has nothing to do with GSAP. How are mouse events detected? The mouse has to be over the bounding box of the element. Your test element is listening for the events, and it doesn't have a height, which is part of the problem. If the mouse enters or leaves a child element, that event will bubble up to the test element listener. When one of the child elements rotate, the mouse might be inside the bounding box, but as it rotates more, the mouse might end up outside the box, triggering a mouse leave event. This should help you see the problem. I can position the mouse in such a way that it will infinitely play back and forth. To fix it, it might help if you give your test element a height, and set pointer-events: none; in your CSS for the children of the test element. BTW, you're not supposed to nest elements inside a heading element i.e. your h1.
  5. 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.
  6. 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.
  7. 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.
  8. OSUblake

    Measure centre point of draggable

    Clamp the actual width.
  9. 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();
  10. OSUblake

    Again: Playing a (staggered) timeline reverse

    It's good. That's what I would do. 😀
  11. .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);
  12. 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.
  13. 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
  14. OSUblake

    Again: Playing a (staggered) timeline reverse

    Love this analogy! I'm wondering if it would work with young people.
  15. 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.
  16. 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
  17. 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.
  18. OSUblake

    Draggable rotate API?

    It's not a bonus file, so you should be able to import it from "gsap/all" or "gsap/ModifersPlugin".
  19. 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
  20. OSUblake

    Draggable rotate API?

    Your animations aren't aware of your draggable. You can use the ModifiersPlugin if want to use the same function.
  21. OSUblake

    GSAP Version Question

    I like the stretchy animation you did. Reminds me of some stuff from Material Design. https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1-3y3zLHPlV3wg-v2CmlB44qg9nLmldet%2F04-elasticity-spectrum.mp4 https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1PONTdRB2Ywa5Meme5pqbV35bRKFrqHLO%2F04-elasticity-basil.mp4 I like this calendar. If you click in the same row or column, then it will stretch to it, otherwise it will fade out and then fade in to where you clicked. https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1KL_-_R_BNLknpF2PtR-z7999Yl1d3Zwk%2F04-elasticity.mp4
  22. OSUblake

    tweenMax + flubberjs or other SVG Morph library

    "t" can be named whatever you want. It represent the progress of the animation, so it can be thought of going from 0% to 100%. From Flubber's docs. var interpolator = flubber.interpolate(triangle, octagon); interpolator(0); // returns an SVG triangle path string interpolator(0.5); // returns something halfway between the triangle and the octagon interpolator(1); // returns an SVG octagon path string So you pass that progress value into flubber, and will figure out where the points on the shape should be.
  23. OSUblake

    tweenMax + flubberjs or other SVG Morph library

    What country? Interesting library. It looks like it works differently than MorphSVG, drawing a bunch of tiny line segments instead of Beziers. You can animate some property on an object from 0 to 1 and fill in the rest.
  24. OSUblake

    Toggle an input's checked "value"

    Nope. .checked is a property of the input. :checked is a pseudo class representing the state of the input, and would be applied based on the value of the property. I'd imagine it would be pretty easy to get past a "I'm not a robot" checkbox in a CAPTCHA if all a spammer needed to do was apply a pseudo class.
  25. OSUblake

    GSAP Version Question

    What if he does nothing for a few months? Will the project complete itself? 🤔