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. Three.js properties

    Hi @GabeM Yeah, I forgot to mention that I did not test that code at all, so I don't know how it looks. But if you need more help help, try making a little demo.
  2. TimelineMax .play() method not launching animation

    The animation will play right away the way you set it up, and the element might not be ready. import { Component, ElementRef, ViewChild, OnInit } from '@angular/core'; import { TweenMax, TimelineMax, Power2 } from 'gsap'; @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: [ './app.component.css' ] }) export class AppComponent implements OnInit { @ViewChild('test') testRef: ElementRef; tween_test; ngOnInit() { this.tween_test = TweenMax.to(this.testRef.nativeElement, 0.3, { opacity: 0, paused: true }); } openContact() { const tl = new TimelineMax(); tl.add(this.tween_test.play()); } } https://stackblitz.com/edit/angular-tkmxb4
  3. TimelineMax .play() method not launching animation

    It's hard to tell what's going on from a snippet. Can you make a simple demo on stackblitz? https://stackblitz.com/
  4. Animating HTML option tag - TimelineMax

    I've never messed with <option> elements, but it doesn't look like you can change the position or transform it. If you animate something else like the backgroundColor, you'll see it work.
  5. TweenMax.from() doesn't always return to correct location

    Your guess would be correct as to the problem. When you interrupt an animation, the value does not back to its original state, which can problematic with from tweens. You could do a fromTo tween, going from y=100 to y=0, which would fix the position problem. Not sure how you wanted to handle hovering in -> out -> in really quickly, but I set it up so only the position resets.
  6. SVG stroke-dasharray quick tip

    Accidental discoveries are always the best. They make you feel like you just discovered penicillin. I understand why works after seeing it, but if somebody asked me to do that yesterday, I'm sure I would have done it the hard way. With a lot of circles and a lot of math.
  7. Velocity Particle Animation

    Using a png is better for performance, but you need to wait until the image loads before you can start using it. So using window.onload is kind of pointless unless your images are in the DOM, which is how I load them sometimes. <aside style="display:none"> <img id="img" src="some-image.png" /> </aside> And you don't use beginPath() and fill() with drawImage(). Just draw the image. https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage ... var img = document.querySelector("#img"); window.addEventListener("load", onAssetsLoaded); function onAssetsLoaded() { // initialize stuff } function draw() { ... context.drawImage(img, 0, 0); } Coding Math is an excellent resource. Keith Peters is the original author of the book that Sahil linked to. Here's a video on edge handling. @Sahil Processing.js is more like a binding to the processing language. P5.js is a little different in that it doesn't use the processing language, and is written in JavaScript. But processing is really cool. My 2 favorite books are the one that you linked to, and "The Nature of Code". It uses the processing language, but it looks a lot like JavaScript, so it's not too hard to understand. I bought the actual book, but you can view it for free. http://natureofcode.com/book/ The genetic algorithms are really cool. There's a section in there about making smart rockets that evolve, and get smarter over time. Here's a video of it using p5.js.
  8. SVG stroke-dasharray quick tip

    Pretty neat! Was this an accidental discovery? For canvas that would be... context.lineWidth = size; context.setLineDash([0, size]);
  9. relative Z translation in CSS

    No, but there's a couple examples of how you could do that in this thread.
  10. Is there an official guide on how to develop plug-ins?

    Well there's this https://greensock.com/docs/Plugins/TweenPlugin And the TEMPLATE_Plugin.js file has some comments https://github.com/greensock/GreenSock-JS/blob/2802e96d94358b2ad28381ca83ac71de7f90f95e/src/uncompressed/plugins/TEMPLATE_Plugin.js But I don't really understand how it works. Every plugin looks really different, some use set, some don't. I want @Carl to make some videos showing how to make a couple plugins.
  11. Three.js properties

    Oops! I just realized you were animating position. Object.defineProperties(THREE.Object3D.prototype, { x: { get: function () { return this.position.x; }, set: function (v) { this.position.x = v; } }, y: { get: function () { return this.position.y; }, set: function (v) { this.position.y = v; } }, z: { get: function () { return this.position.z; }, set: function (v) { this.position.z = v; } }, rotationX: { get: function () { return this.rotation.x; }, set: function (v) { this.rotation.x = v; } }, rotationY: { get: function () { return this.rotation.y; }, set: function (v) { this.rotation.y = v; } }, rotationZ: { get: function () { return this.rotation.z; }, set: function (v) { this.rotation.z = v; } } }); Then try animating just the object. TweenMax.to(myObject3d, 4, { bezier: { type: 'soft', values: [ { x: 0, y: 0, z: 0 }, { x: 100, y: 100, z: 100 } ], autoRotate: [ ['x', 'y', 'rotationZ', 0, false], ['z', 'x', 'rotationY', 0, false], ['z', 'y', 'rotationX', 0, false] ] }, ease: Power1.easeInOut });
  12. Three.js properties

    There's no reason you can't make it. Run this code first. I think THREE.Object3D is the base class if you want everything to have those properties. Object.defineProperties(THREE.SomeClass.prototype, { rotationX: { get: function () { return this.rotation.x; }, set: function (v) { this.rotation.x = v; } }, rotationY: { get: function () { return this.rotation.y; }, set: function (v) { this.rotation.y = v; } }, rotationZ: { get: function () { return this.rotation.z; }, set: function (v) { this.rotation.z = v; } } });
  13. Didn't see that. What about adding some type of quick launch button that will open up a starter pen with all the plugins? That would be even better.
  14. I hate trying to find that. Copy the links from here.
  15. Embeddable CustomEase editor / visualizer

    Sure. You're free to use anything that I post on this forum... well, as long as it's made by me.
  16. Simulate overscroll rubber-band effect with ScrollMagic

    Yes, you could do that and have it still work with ScrollMagic. Getting it to work with a mouse scroll probably wouldn't be too hard. My concern would be with touch on mobile. I haven't tried it, but I think getting it to look and behave correctly might be hard.
  17. Can you live update a physics tween?

    Why don't you want to kill it? Is it causing a jump when you create a new one? Or are you trying to keep the duration the same? Do you think you can make a simple demo of what you're trying to do? There might be some other approaches if I can see what's going on. You can use the physics plugins on CodePen by using the url from here.
  18. Reverse a Stagger Direction (not reverse Timeline)

    You're correct. unshift adds an item to the front of an array. First he created the boxes array, and then loops through the node list, adding each node to the boxes array using unshift. Because he's using unshift instead of push, it reverses the order.
  19. Reverse a Stagger Direction (not reverse Timeline)

    One suggestion though. Array methods like forEach won't work on a NodeList in older browsers like IE. So I would do it like this. var boxes = Array.prototype.slice.call(document.querySelectorAll(".box")).reverse();
  20. How can I write more concise and efficient Tweens?

    Haha! I didn't even think about that. "You Might Not Need ScrollMagic if..." I've been throwing that saying around for like the past year or so, but I got the idea from You Might Not Need jQuery. Later on I found out that there are several sites like that. https://youmightnotneed.com/
  21. Animating CSS Circles

    You can draw a circle in 1 line of code using canvas or SVG. With CSS, you have to use multiple elements, like here, or a clip-path, which doesn't have good CSS support. The easiest option seems like SVG, then canvas, followed by CSS in a distant last.
  22. Simulate overscroll rubber-band effect with ScrollMagic

    I get what you're asking, but I'm just not sure how you could do that without modifying the scroll behavior. To make it seem like the scroll is getting harder, you would have to add a bunch of extra space to the bottom, and then start translating all the content down once you reach a certain scroll position, but with some friction. I think coding something like that would be pretty difficult.
  23. Stacking order issue on rotating overlapped elements

    I don't see a problem in Firefox. For Safari, translateZ can fix clipping issues.
  24. Move an object along the svg path with mouse

    Yep. That should give you an idea on how to get started, but it's not a perfect solution. For example, if the mouse is equal distance between two or more points on a path, which point should it use? That's something you'll need to figure out.
  25. rotationX !== transform: rotateX

    That's usually not a issue. You've just come across a tricky situation. If you tried to convert your CSS over to three.js it would probably transform it the same way GSAP is doing it. While not ideal, sometimes using a wrapper can help alleviate some of those problems. For example, I converted this animation over to GSAP... well, it originally had the rotateX at 70deg. http://jsbin.com/xolacasiyu/edit?js,output But doing a straight conversion to GSAP didn't work as expected, so I just applied the rotateX transform to a wrapper element. Just an idea. I don't know if that will work for everything you are trying to do.