OSUblake last won the day on January 17

OSUblake had the most liked content!

OSUblake

Moderators
  • Content Count

    3,995
  • Joined

  • Last visited

  • Days Won

    411

Everything posted by OSUblake

  1. OSUblake

    Draggable slider breaks on resize

    getBoundingClientRect is going to give you incorrect results if you're not on the first slide. Try something like this on resize. save current slide index move to first slide calculate bounds move back to current slide
  2. OSUblake

    problem with color changes

    I don't know what's supposed to be happening. Make a demo with 1 box that doesn't move, and start from there.
  3. OSUblake

    problem with color changes

    You're using a file from 2012. You can grab the latest files from a CDN like cdnjs. https://cdnjs.com/libraries/gsap
  4. It eliminates the need to wrap mainObject.closeDragMethod in a function. I wrote a little about scoping here. If you're curious, here's a demo that shows how I typically set classes up with draggable. Look at the ColorItem class on about line 65. It doesn't use Angular, but it's the same concept. I make the draggable callbacks part of the class.
  5. It doesn't even look like you have a "close" method. You do have a "closeDragMethod" though. Again, a demo is really the only the way to understand the issue. However, the code you posted gives a little more insight into the problem. It's just a scoping problem. You're not using arrow functions or setting the scope of the draggable, so "this" inside the draggable callbacks refers to the draggable instance. Therefore, this.close() or this.closeDragMethod() will be undefined. So setting "this" to a variable like you did is correct approach. You could still set scope in your callback. onDragEnd: function() { if (this.hitTest(".trashcan", "10%")) { TweenMax.to(this.target, 0.2, { opacity:0, scale:0, onComplete: mainObject.closeDragMode, callbackScope: mainObject }); } ... }
  6. A demo would be helpful because your code doesn't look right. It should probably be something like this. update() { TweenLite.to(this.target, 0.6, { opacity:0, scale:0, svgOrigin:"0 0", onComplete: this.close, callbackScope: this }); }
  7. OSUblake

    Bending object as its animated along bezier path?

    Hi @wcomp You may want to try pop.svg. https://github.com/ste-vg/pop.svg
  8. OSUblake

    Animation: Grow Tree Branch With Leaves

    Related thread.
  9. OSUblake

    Proper way to animate responsively

    Did you notice the other custom element property being used? var t = box._gsTransform; But GSAP put that one on there for me. Since _gsTransform is an object, you can pass around its reference in some pretty interesting ways. I have several ModifiersPlugin demos that use the _gsTransform object as a point to follow. The first leader being passed into the createLine function is the pointer object. All the other leaders are _gsTransform objects.
  10. OSUblake

    Proper way to animate responsively

    Correct. See my two responses here for why I create a variable in a loop, and why it's not a new object.
  11. OSUblake

    Objects, coordinates and paths

    I don't know. Have you tried using a RenderTexture? That might give you a bigger object to pan around. Zooming might not look good because a texture is a bitmap, so it will get pixelated if you scale/zoom in. http://pixijs.download/release/docs/PIXI.RenderTexture.html https://pixijs.io/examples/#/basics/render-texture.js https://pixijs.io/examples/#/demos/render-texture-demo.js
  12. OSUblake

    Proper way to animate responsively

    You can do a FLIP animation.
  13. OSUblake

    about random color of backgroundcolor

    You need to run your backgroundColor function first to generate the array. backgroundColor: (function(){ var m = new Array(); for (var i = 0; i < 80; i++) { m.push("#"+ Math.floor((Math.random() * 10))+ Math.floor((Math.random() * 10))+Math.floor((Math.random() * 10))); // to construct a color arrary. } return m; })(),
  14. OSUblake

    Combo of Spine, Pixi and GSAP

    Spine has it's own animation runtime, so GSAP probably won't be useful in that regards. But you can certainly animate the Spine display object itself using GSAP, like it's position, or trigger a spine animation using callbacks on timeline.
  15. OSUblake

    PixiPlugin error when used with Angular

    That error happens because the file you had listed was an ES module, which has to be imported. The scripts array expects files that don't have to be imported, i.e. the umd version.
  16. OSUblake

    ADA Compliancy and Greensock?

    What makes a website ADA compliant? As long as it follows guidelines for accessibility, I don't see why animations would be a problem. But I guess it depends on the type of animations. Seizure inducing flashing lights would probably be a bad idea. Animating a menu into view would probably be okay. But I'm no expert on this. If you're worried, you can have an option to turn any animations off.
  17. I'm confused. Doesn't @mikel demo do what you're trying to do? Can you explain what your goal is? Timeline animations are not like elements using CSS float left where everything shifts to the left when you remove something from the front. By default, animations are added relatively, but the actual animation's position is absolute. Adding or removing animations will not change the start time. A good tutorial on positioning. https://greensock.com/position-parameter That's trimming something off the end. The start time still remains the same. Have you verified that you're stripping stuff off the end of the timeline like you want? A quick look at your code says otherwise. You're removing and adding a tween one at a time, i.e. you're removing a tween from the front, and sending it all the way to the back. You should probably remove all the tweens before adding them to the timeline. $(".forward").click(function(e) { tl.remove(cachedTweens); for (var whichId = 0; whichId < cachedTweens.length; whichId++) { var tweener = cachedTweens[whichId]; //tl.remove(tweener); tweener.paused(false); tl.add(tweener, "-=0.25"); } tl.play(); })
  18. Percentage values are relative to the viewBox, so that's expected. That's has nothing to do with GSAP. Set it yourself to see. document.querySelector("#mySVG").setAttribute("viewBox", "-120 -96 392 96")
  19. OSUblake

    Right source for Typescript definitions files?

    I'm creating a new set of definitions for the project I'm currently working on, but they aren't complete. I've only added the stuff I needed, but we can add to the package when I'm done. If you need any definitions for a plugin or something, just let me know, I can post it.
  20. I'm not exactly sure what you're asking, but maybe .shiftChildren() is what you're looking for. https://greensock.com/docs/TimelineMax/shiftChildren() And maybe .recent(). https://greensock.com/docs/TimelineMax/recent When manipulating a timeline becomes too complicated, the easiest solution is to rebuild it.
  21. OSUblake

    Right source for Typescript definitions files?

    Try this one. They're not 100% complete, but should be ok for normal usage. npm install --save @types/gsap If you import files individually like this... import { TweenLite, Linear } from "gsap/TweenLite"; import { TweenMax } from "gsap/TweenMaxBase"; import { TimelineMax } from "gsap/TimelineMax"; import "gsap/CSSPlugin"; Or all of them like this this... import { CSSPlugin, TweenMax, TimelineMax, Linear } from "gsap/all"; Then you'll need to declare the modules in a d.ts file somewhere. So something like this. This isn't complete. Just showing how. declare module "gsap/TweenLite" { export { TweenLite as default, TweenLite, Animation, Ease, Linear, Power0, Power1, Power2, Power3, Power4, TweenPlugin } from "gsap"; export class EventDispatcher { } } declare module "gsap/TweenMaxBase" { export { TweenMax as default, TweenMax } from "gsap"; } declare module "gsap/TimelineLite" { export { TimelineLite as default, TimelineLite } from "gsap"; } declare module "gsap/TimelineMax" { export { TimelineMax as default, TimelineMax } from "gsap"; } declare module "gsap/CSSPlugin" { class CSSPlugin { } export { CSSPlugin as default }; } declare module "gsap/all" { import CSSPlugin from "gsap/CSSPlugin"; export { CSSPlugin }; export * from "gsap/TweenLite"; export * from "gsap/TweenMaxBase"; export * from "gsap/TimelineLite"; export * from "gsap/TimelineMax"; }
  22. OSUblake

    Smooth Page Scroll

    I've been getting a bunch of people asking me about how to do a smooth page scroll effect, so here it is. Scrolling is just a transform. If you scroll 100px down, the browser will translate the page -100px up. We can do that with GSAP. TweenLite.set(contentToScroll, { y: -window.pageYOffset }); So how do you prevent the browser from scrolling the content? Position your content in a fixed container, and set the height of the body equal to the height of your content. This will allow the page to scroll, but the fixed container won't move. Now animate the y position of your content based on the scroll position of the page.
  23. OSUblake

    Smooth Page Scroll

    Here's a quickie version that should prevent the navigation bars from moving/resizing. It still has issues, like you can't interact with anything because pointer events are blocked. It could probably be done better using custom elements, but React doesn't play nice with custom elements.
  24. There's also a transparent option. var app = new PIXI.Application( { view: document.querySelector("#canvas"), transparent: true });
  25. OSUblake

    Smooth Page Scroll

    The mobile issue can be solved by using a fixed body size, and making another element scrollable. For an example, go to stackblitz and start an ionic app. The only downside to that approach is that the navigation bars will not shrink or move out of view. And here's one way to listen for media query changes instead of resize events.