antialias

Thanks for your prompt reply! Starting to use gsap in the file looks like the step I was missing. When I've used gsap to animate three.js before everything was inside one big script: http://instantplaces.ca/Desktop-200506-context-9.html which all worked (with lots of scrolling). Three.js is working now with modules which seems elegant-- geometry will be in a module like 'cube.js' ===== import { BoxBufferGeometry, MathUtils, Mesh, MeshStandardMaterial, } from '../../../vendor/three/build/three.module.js'; function createCube() { const geometry = new BoxBufferGeometry(2, 2, 2); const geometry2 = new BoxBufferGeometry(2, 3, 2); const material = new MeshStandardMaterial({ color: 'purple' }); const material2 = new MeshStandardMaterial({ color: 'green' }); const cube = new Mesh(geometry, material); const cube2 = new Mesh(geometry2, material2); cube.add(cube2); cube.position.x = -0.4; cube.position.y = -0.1; cube.position.z = 0.5; return cube; } export { createCube }; ===== which gets imported to a world.js for rendering. This is not working in a gsap-test.js file in the same directory: import {gsap} from "gsap" ; import { createCube } from 'cube.js'; const cube = createCube() gsap.to (cube, {duration: 3, x: -1.5} ) To use gsap in this system, do I need to make a module of gsap and import that to cube.js? Or import cube.js into a gsap.js file and send that to the world.js for rendering?

Hello, I have a simple three.js project in which I am trying to install gsap as a module. I have: -- gsap-bonus.tgz in the root -- a node_modules folder with gsap -- package.json with "dependencies": { "gsap": "^3.6.1"} ===== -- package-lock.json { "name": "hello_cube-210520", "version": "1.0.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "hello_cube-210520", "version": "1.0.0", "license": "ISC", "dependencies": { "gsap": "^3.6.1" } }, "node_modules/gsap": { "version": "3.6.1", "resolved": "https://registry.npmjs.org/gsap/-/gsap-3.6.1.tgz", "integrity": "sha512-hCkjk7UVbeEmlpFbiy7lIsh742bwVlMhdCnnQ1CvVOAdURyPX8hXjFZGh/0YzUyAcWPyJPE0/paMhSYtLhGlfA==" } }, "dependencies": { "gsap": { "version": "3.6.1", "resolved": "https://registry.npmjs.org/gsap/-/gsap-3.6.1.tgz", "integrity": "sha512-hCkjk7UVbeEmlpFbiy7lIsh742bwVlMhdCnnQ1CvVOAdURyPX8hXjFZGh/0YzUyAcWPyJPE0/paMhSYtLhGlfA==" } } } ========= The three.js import works, gsap fails: import { BoxBufferGeometry, Color, Mesh, MeshBasicMaterial, PerspectiveCamera, Scene, WebGLRenderer, } from '../../../vendor/three/build/three.module.js'; import {gsap} from "gsap" ; ================ When I add <import {gsap} from "gsap" ;> I get "'gsap' is declared but its value is never read." <import {gsap} from "./ gsap-bonus.tgz" ;> is greyed out in VSCode.

Thanks Carl, I want the timelines to restart independently so that they phase against each other. I just tried this test: ////////////////////// timeline 4 plane 3 var tl4 = new TimelineMax( {paused:false, repeat:-1, id: 'one' }) tl4.to(plane3.scale, 5, {delay: 5, x: 3.0, ease:Power1.easeInOut }) // scale plane 3 tl4.to(plane3.scale, 5, {delay: 5, x: 2.0, ease:Power1.easeInOut }) // scale plane 3 ////////////////////// timeline 5 plane 4 //////////////////////////////////////////////////////////////// var tl5 = new TimelineMax( {paused:false, repeat:-1, id:'two'}) tl5.to(plane4.scale, 4, {delay: 5, y: 2.0, ease:Power1.easeInOut }) // scale plane 4 tl5.to(plane4.scale, 4, {delay: 5, y: 0.5, ease:Power1.easeInOut }) // scale plane 4 //////// The timelines restart in sync after the global timeline loops, even though the DevTools gui shows durations of 20 and 18 seconds respectively. I want them to get slowly out of sync. Do I need two global timelines?

Suppose you had an infinitely looping timeline of duration 60 seconds, and a second infinitely looping timeline of duration 61 seconds. How would you have them playing concurrently so they stay separated in time? I am making a generative artwork and want to have the animation sequences shift against each other in time, as you would do with audio loops of slightly different durations.

Thanks Jack— I'm able to use this technique to choose playback speeds from an array and play them in the timeline. Progress! I'd also like to get durations dynamically chosen in a similar manner if possible. Here's a code snippet of my attempt that doesn't work: var xpos = [100, 200, 300, 400]; var index = 0; var durations = [3, 1, 2, 4, 5]; var indexdur = 3 ; var tl = new TimelineMax({repeat:-1, onRepeat:function() { tl.invalidate(); }}) tl.to(".green", function() { indexdur = Math.floor( Math.random() * durations.length ); return durations[indexdur]; }, {x:function() { index = Math.floor( Math.random() * xpos.length ); console.log("index: " + index + ", x: " + xpos[index]); return xpos[index]; }});

Thanks Jack! I should explain that I hope to use GSAP as the hub for a generative audiovisual piece that will run in the browser. GSAP would handle the tweening/easing between parameters in the audio machine (panning, pitch, and position within a sample, via howler.js) and scaling, rotations, texture fades for 3D objects via three.js. It seems like putting the generative sequences in a timeline or multiple timelines is the way to go, and parts of this concept do work using GSAP, so that is hopeful. As the generative piece runs it needs to pass randomly-chosen values into the timeline to create variation in the audio/visual parameters, and that's where I'm stuck. In lieu of creating a codepen here is a snippet of code that works to choose a playback speed(pitch) from an array, load it into the timeline, and play audio at the selected pitch: ============== var rates1 = [3.0, 1.2, 2]; var index1 = 0; var tl1 = new TimelineMax(); tl1.to(sounder, 2 , {rate:(rates1[index1])}) // this does get the howler object 'sounder' playing at 3x pitch, index 0 from the array ============= What doesn't work is to have the timeline pick and load a new value from the array onRepeat: var tl1 = new TimelineMax( {paused:false, repeat:-1, onRepeat:function (){ index1 = (Math.floor((Math.random()*rates1.length))); }); ============= I have tried to get the timeline to invalidate/restart to trigger the array selection but no luck. Any pointers appreciated!

In this version I'm trying to use an array of values to pick from in an onComplete function. No error messages, but no new x position after the invalidate/restart: https://codepen.io/joesnow/pen/mKMWPB?editors=1111

thanks Carl! Lots to chew on here

I'm trying to get an animation duration set to a selection from a random range. In this codepen the button click creates a new duration that doesn't change the animation timing.

I'm trying to get an animation duration set to a random selection from an array of durations. In this codepen the animation finds the array index that is initialized, but doesn't choose a new duration on repeat.

Working now! Thanks for the wonderful tool and support.

I'd like to use custom ease functions to animate parameter changes, in this case for a howler.js object 'sounder' with an id of 'id3'. The tweening and easing works with a standard ease. Please see attached js file. When I try to use a custom ease I get this error: CustomEase.min.js:12 Uncaught TypeError: a.match is not a function at l.m.setData (CustomEase.min.js:12) at new l (CustomEase.min.js:12) at Function.l.create (CustomEase.min.js:12) at gsap-180608-howler-2-timelines-customease-2.html:77 I have tried the three different methods o this page: <https://greensock.com/customease-as>, none of which are working for me. test-customEase-1.js

Is there a tutorial on using console.log (or other methods) to monitor activity inside a running timeline? I'm using a GSAP timeline to control position, rate and volume of a sound playing via howler.js. It's working-- but I'd like a way to check values etc as the project gets more complex. ========= <button id="ex1-play">Play</button> <button id="ex1-pause">Pause</button> <button id="ex1-rand">RandPos</button> <button id="gsap-play">gsapPlay</button> <button id="gsap-pause">gsapPause</button> <button id="gsap-resume">gsapResume</button> <button id="gsap-reverse">gsapReverse</button> <script> var sounder = new Howl({ src: ['sounds/counting2-16.mp3'], loop: true, autoplay:true, volume: 1.0, rate: 1.0, pos: 1.0 }), id3 = sounder.play() var randomPlay = function(){sounder.seek(Math.floor((Math.random()*16)+1))}; document.getElementById('ex1-play').onclick=function(){ sounder.stop().play(), sounder.fade(0.0, 1.0, 1000) }; document.getElementById('ex1-pause').onclick=function(){sounder.pause()}; document.getElementById('ex1-rand').onclick=randomPlay; var tl = new TimelineMax( {paused:true, repeat:-1, yoyo:true}); document.getElementById('gsap-play').onclick=function(){tl.play()}; document.getElementById('gsap-pause').onclick=function(){tl.pause()}; document.getElementById('gsap-resume').onclick=function(){tl.resume()}; //document.getElementById('gsap-reverse').onclick=function(){tl.reverse()}; ?? tl.to(sounder, 15, {rate:"0.75"}) .call(randomPlay) .to(sounder, 5, {rate:"1.0"}) .to(sounder, 1, {volume:"0.0"}) .call(randomPlay) console.log(sounder.seek()) .to(sounder, 2, {volume:"1.0"}) .to(sounder, 10, {rate:"0.5"}) .call(randomPlay) console.log(sounder.seek()) .to(sounder, 12, {rate:"1.0"}) .call(randomPlay) .to(sounder, 10, {rate:"1.125"}) .call(randomPlay) </script>