OSUblake last won the day on October 16

OSUblake had the most liked content!

OSUblake

Moderators
  • Content count

    3,816
  • Joined

  • Last visited

  • Days Won

    382

Everything posted by OSUblake

  1. OSUblake

    Tween Max differences AS3 to JS

    Hi @Spycatcher2018 Check out the docs. The API for the ActionScript and JavaScript version of TweenMax is mostly the same. Note that JS doesn't have types unless you're using TypeScript. The big difference is that there are several ways to render stuff to the screen, HTML, SVG, and canvas. HTML is good for text and input, like buttons. SVG and canvas are good for graphics, and each medium has pros and cons. SVG is easier to work with, but slower than canvas. Canvas is fast, but can be JS heavy because it uses a lot of boilerplate code. Note that you can layer stuff on top of each other to create a composite, so you're not limited to one medium, but your GSAP code will be slightly different depending on what medium you are animating. Here's a good tutorial for SVG. http://tutorials.jenkov.com/svg/index.html And canvas. https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial I don't think there's much of a need to use a library for SVG, but there are several canvas libraries that might make your transition easier. PixiJS and CreateJS have an API that is similar to flash. I think CreateJS is the default canvas library used by Adobe's Animate CC. http://www.pixijs.com/ https://www.createjs.com/easeljs Some other canvas libraries that focus on vector graphics. https://p5js.org/ http://paperjs.org/
  2. OSUblake

    Understanding Codepen

    Hi @2sweedy I think starting out with p5/processing is a great way to learn animation and programming, and the math won't be as hard as you may think. If you want to use GSAP with the p5 editor, just copy the url from the "Download GSAP" button on greensock.com, and insert it into the index.html page. Here's the demo @Sahil made using that editor. Just press the play button. https://editor.p5js.org/OSUblake/sketches/BJ4n6bqDX
  3. OSUblake

    SVG transform origin

    Here's a neat article Jack wrote about transform origin in SVG. In one of the demos it shows how the transform origin is actually relative to the top left corner of the SVG, but you don't have to deal with that if you're using GSAP. https://css-tricks.com/svg-animation-on-css-transforms/
  4. OSUblake

    SVG transform origin

    The problem is that changing cx/cy values results in a different getBBox value. GSAP normalizes a lot of behavior with transforms in SVG, but they work EXACTLY like they do in canvas. If you don't translate to the transform origin, it's not gong to scale correctly.
  5. OSUblake

    Is this bug or feature?

    What's the problem? Maybe set the position to absolute so it doesn't scale the whole screen width?
  6. OSUblake

    Page Transition with Barbajs

    We totally highjacked this thread. Your demo reminds me of a voronoi diagram. https://codepen.io/search/pens?q=voronoi&page=1&order=popularity&depth=everything&show_forks=false
  7. OSUblake

    Make transformOrigin + Scale = Responsive?

    You can scale your globe.
  8. OSUblake

    import problem for Physics2D plugin in Vue

    Make sure you put the file from the bonus-files-for-npm-users folder. It shouldn't be looking for a relative module like ../TweenLite.js The correct file will look for gsap/TweenLite.js
  9. OSUblake

    Reverse on Timelinemax with nested staggerFromTo and other problems

    I don't. I worry about getting it working first. When I first started coding, I was constantly questioning everything I did because I was worried about writing code that did not fall under some set of "best practices", like I was going to be graded on it. It took some time, but one day I realized that I was spending most of my time trying to adhere to someone's opinion and I didn't know why. I was a cargo cult programmer. (hat tip to @Dipscom for showing me that term) https://en.wikipedia.org/wiki/Cargo_cult_programming DRY All this means is don't write the same code repeatedly. If you're typing a similar block of code more than 3 times, there's a good chance you can refactor it into a single function/method or other mechanism like a loop. If it's too hard to refactor, makes your code harder to read, or adds unnecessary complexity, then it might not be worth the refactor. SPEED Google some of the problems with premature optimization. GSAP is already highly optimized, so there's not much you can do to make it run faster. If performance is a problem, then you should look at the properties you're animating. Anything that triggers a layout or paint is a potential bottleneck. https://csstriggers.com/ https://gist.github.com/paulirish/5d52fb081b3570c81e3a SETTINGS Your settings object is way too granular. It looks like you're defining your entire app inside of it, and it's very hard to follow because it's nested way too deep. The advice @Sahil gave about breaking it down into specific settings is a good idea. You may also want to look at using Object.assign() for default or extending settings. Why does that irritate you? Sure, querying the DOM can be slow, but I think what @PointC did in his Star Wars demo is fine because it's all done upfront, and he has no need to reference any of those elements again. Once an animation is created, it's not going query the DOM again, but you can always pass a real element into a function. And note that keeping references to objects can lead to memory leaks if you're not careful. The elements that you're storing in your settings object are going to remain there until you remove them.
  10. OSUblake

    Animating Canvas fillStyle with GSAP

    Emitters usually have a way to start and stop them, and you can usually position them. Here's a quicky modification of your first demo. Probably not the best way to do it, but it demonstrates those concepts. The emitter will follow your mouse, and you can toggle it on and off. Timelines can call functions, so you could start your emitter that way.
  11. OSUblake

    Page Transition with Barbajs

    To normalize the time, you would have to base the size on the center of the circle to the furthest corner. You could probably change the timeScale, but if you're going that far into calculations, you might as well just set the correct size. All the circles here will finish at the same time. There's lot of uses in trigonometry. The relationship is like this. To get the diagonal of a 200 x 200 square. 200 * Math.SQRT2 = ~283 To get half the diagonal of a 200 x 200 square. 200 * Math.SQRT1_2 = ~141.5 If you know the diagonal is ~283, then the length of each side is 283 * Math.SQRT1_2 = ~200 Math.SQRT1_2 is the same as sin 45 Math.SQRT1_2 === Math.sin(45 * Math.PI / 180) If you've ever heard of the golden ratio, √2 is used for the silver ratio. https://en.wikipedia.org/wiki/Silver_ratio
  12. OSUblake

    Moving Objects in JS

    Khan Academy uses Processing.js which is basically the same the thing as p5.js. You should be able to share your code from there, or on OpenProcessing. https://www.openprocessing.org
  13. OSUblake

    Page Transition with Barbajs

    Hey, that's a pretty interesting use for vmax! However, there is a downside to that approach. The speed of the animation will appear different depending on where you click. It will be faster at the center than at the corners. Did you just guess the 260 value? That's close, but it actually won't cover the screen if it starts at a corner of a square shaped window. The vmax should be 283, which is 200 times the square root of 2. The square root of 2 is a ratio, which is the length of the diagonal of a unit square, a square that is 1 x 1 in size. Math.sqrt(1 * 1 + 1 * 1); Math.sqrt(2); There's actually a constant in JavaScript for that, Math.SQRT2 and its inverse Math.SQRT1_2.
  14. OSUblake

    PixiPlugin help

    Thanks for the demo. You reminded me of something. I don't think a lot of people know this, but the blur filters have a quality property. If you blur something too much, it starts to look blocky, like in your demo. Increasing the quality increases the number of passes the filter will do, resulting in a smoother looking blur. You can test it out here. The default quality value is 4, which is pretty low. When I first started using Pixi, it took me a good year before I discovered that was the reason blurring didn't look good after a certain value. It'd be nice if @GreenSock could incorporate the quality property into the plugin and make a mention of it the docs.
  15. Hi @kbeats I'm so confused. Why would something be incorrect before you check it? And that's way too many class checks. I think the original author of that demo was trying to avoid "hasClass" logic by linking the box to the target with the targetAttachedTo property, but the connection is not obvious because of the "target" naming being used with an event target in the same line of code. This will actually check if something is incorrect.
  16. OSUblake

    CSSPLUGIN holding a reference

    Try something like this. function onStop(){ mainT.kill() document.getElementById("main").innerHTML = ""; for (var i = 1; i < 25; i++) { window["t" + i] = null; } mainT = null; TweenLite.set(document.createElement("div"), { x: 100 }); }
  17. OSUblake

    CSSPLUGIN holding a reference

    I don't think a dummy value will work as it's not a real element, but it really doesn't matter if you tweened a real element because you're holding references to the same objects. You'll need to clean up after yourself and null all these timelines out if want them to be available for garbage collection. var t1 = new TimelineMax({repeat:-1}); var t2 = new TimelineMax({repeat:-1}); var t3 = new TimelineMax({repeat:-1}); var t4 = new TimelineMax({repeat:-1}); var t5 = new TimelineMax({repeat:-1}); var t6 = new TimelineMax({repeat:-1}); var t7 = new TimelineMax({repeat:-1}); var t8 = new TimelineMax({repeat:-1}); var t9 = new TimelineMax({repeat:-1}); var t10 = new TimelineMax({repeat:-1}); var t11 = new TimelineMax({repeat:-1}); var t12 = new TimelineMax({repeat:-1}); var t13 = new TimelineMax({repeat:-1}); var t14 = new TimelineMax({repeat:-1}); var t15 = new TimelineMax({repeat:-1}); var t16 = new TimelineMax({repeat:-1}); var t17 = new TimelineMax({repeat:-1}); var t18 = new TimelineMax({repeat:-1}); var t19 = new TimelineMax({repeat:-1}); var t20 = new TimelineMax({repeat:-1}); var t21 = new TimelineMax({repeat:-1}); var t22 = new TimelineMax({repeat:-1}); var t23 = new TimelineMax({repeat:-1}); var t24 = new TimelineMax({repeat:-1}); var mainT= new TimelineMax({paused:true})
  18. OSUblake

    Moving Objects in JS

    Let me use my psychic powers. It's unclear if GSAP is being used, but I am seeing p5.js. That's the only thing I know of that uses a draw() function. We don't get a lot of questions about p5.js, but it's pretty to easy to animate with GSAP. I remember helping somebody with p5.js here.
  19. OSUblake

    Animating Canvas fillStyle with GSAP

    Good question. The myRect object I created cannot be reused like that. You can make a function that returns a simple object like that i.e. a factory function. To use "new" you have to call a constructor function or a class, which is what I used in my second demo. They both do the same thing, but a class is a little cleaner, and newer, so you have to use babel if you want to support IE. The book that you bought is old, so you'll mostly see constructor functions being used, like this ball class in chapter 6. https://github.com/lamberta/html5-animation/blob/master/examples/ch06/classes/ball.js Here's a demo where I use all 3 methods, classes, constructor functions, and factory functions.
  20. OSUblake

    Animating Canvas fillStyle with GSAP

    Oh I noticed it yesterday, but I was out for most of the day. It's hard making a demo on a phone. 😉
  21. OSUblake

    Animating Canvas fillStyle with GSAP

    Hi @cgorton How are you making out? I didn't recognize you without a avatar. Learning the basics of canvas isn't that hard. Instead of declaring what you want the browser to display with CSS and markup, you write instructions to draw stuff. It works a lot like Logo programming (turtle graphics), which is a programming language for children. You tell the turtle where to go with very simple instructions/commands. With canvas, the context is the turtle, and that's the only thing you can really interface with. https://turtleacademy.com/lessons/en Having only 1 object to work with can be quite limiting, so the solution it to create your objects to work on. If you had some CSS and an SVG... <svg> <style> #rect { fill: #2196F3; fill-opacity: 0.5; stroke: #111; stroke-width: 2; } </style> <rect id="rect" x="20" y="100" width="200" height="150" /> </svg> ... it could be represented as a simple object like this. var myRect = { x: 20, y: 100, width: 200, height: 150, fill: "#2196F3", fillOpacity: 0.5, stroke: "#111", strokeWidth: 2 }; Now you can tween that object as if it were an a real element. If it's a number, GSAP can animate it. The properties you use and how you name them is entirely up to you. The context has no concept of your objects, so do what makes the most sense. You can also make optimizations by reusing objects. Notice how the line has 3 different strokes applied to it. With SVG, that would require 3 different elements. The only way to end a path is to call context.beginPath(), so you can keep applying different styles to the same path. If you haven't already, check out these threads. CSS tricks. It's a little advanced, but it shows some nice rendering techniques. https://css-tricks.com/using-gsap-animate-game-ui-canvas/ I would also recommend going through every property and method on MDN. It's very helpful, and most of the pages have demos. https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D MDN also has some pretty good tutorials. Some of the stuff is dated, but it's fine if you're just getting started. https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial
  22. OSUblake

    drawSVG not recalculating path length during tween

    Not sure if the remainder operation is really necessary. I just did that to reset the totalTime so it's not a huge value. This should also work. var totalTime = tween.totalTime(); tween.time(0).invalidate().totalTime(totalTime);
  23. OSUblake

    drawSVG not recalculating path length during tween

    You typically redraw everything on every frame with canvas, so changing the color of a circle would be as simple as this. var myCircle = { x: 100, y: 100, radius: 25, fill: "blue" }; // it's going to be red on the next frame myCircle.fill = "red"; And you have to keep track of the coordinates in order to tell the canvas where to draw your objects. But again, it's about using what's best for the job. For a good comparison between the DOM and canvas, check out this video. Progress just goes to 1, so it's hard to tell when it's playing backwards. Try using something like .totalTime() and then use the remainder operator with the duration times 2. // Use 6 since the regular duration is 3 var totalTime = tween.totalTime() % 6; tween.time(0).invalidate().totalTime(totalTime);
  24. OSUblake

    React Native Support

    requestAnimationFrame? https://facebook.github.io/react-native/docs/animations.html#requestanimationframe However, I heard that animation performance in React Native is really bad.
  25. OSUblake

    collision detection

    I have both of those books. My Foundation Game Design book has some weird printing errors, but it's still a good book. The author of that book has a book about PixiJS, which is commonly used with games. http://a.co/g4sTvGA And he maintains a couple game engines. https://github.com/kittykatattack/ga https://github.com/kittykatattack/hexi But Phaser is the most popular 2D game engine. http://phaser.io/ Also check out the HTML5 Game Devs forum http://www.html5gamedevs.com/ GSAP should play nicely with all those engines/libraries.