OSUblake

Hi @jimjiminyjimjim I'm not exactly sure what you're going after. Is there anything in the demo section that is close to what you're trying to do? https://greensock.com/st-demos/

It's definitely possible. The JSON is just using jQuery to create elements. Nothing special. Start simple. Just make a basic carousel and then add more features. Eventually, you can work your way up the JSON. There are way too many examples to share. Just search around the forum. https://greensock.com/search/?q=carousel&quick=1

Would you mind showing how you would solve this problem with framer motion? We're looking at different ways to make gsap easier to use in React.

Maybe this can help you get started. https://edidiongasikpo.com/using-gsap-scrolltrigger-plugin-in-react new Image() should work anywhere.

Maybe you can learn from this pen. https://codepen.io/GreenSock/pen/WNNNBpo It's a simple pattern that works great with changing stuff like with the mouse. And yes, you can do the same thing to progress or whatever value you want. An older pen using the old syntax, but using the same concept. https://codepen.io/osublake/pen/BLOoOP

No. I just suggested that so you would stop focusing on gsap, and address the real issue at hand, how to update text. I'll check out that code you posted later, but it looks like a good start. It seems like you're going to have to remove and recreate the text geometry every time the text changes.

GSAP is not interacting with three.js. GSAP is animating a proxy. It's just an intermediary. GSAP is doing work on something else, and then you can read those changes and apply them somewhere else, like three.js. Just like I did with the canvas element. Just ignore gsap for a second. How do you change the text in three.js? This is the question you need to answer. The text says "Three.js basic shape." Now how would you change text to say something else? Like 1 second later? If you can answer that it should be very easy to plug into that update function. setTimeout(() => { // how to change the text to something else in here??? }, 1000); I don't know the best way to do this, that's why I'm asking you.

The only way for the way to happen is if you are not using that proxy for the target, and using a string instead. Like... var mw = gsap.timeline({ onUpdate: updateText, defaults: { ease: "power4.inOut", duration: 1 } }); mw.to(message, { text: "foo" }) .to(message, { text: "bar" }) .to(message, { text: "baz" }); There should be nothing wrong with the code I posted. Just a simple demo showing it working on a canvas element. https://codepen.io/osublake/pen/8655a8000ee046eb43a359e7d5562510 How do you set text in three.js?

Your script tags should probably be at the very end, right before the closing body tags. <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script> <script src="app.js"></script> </body> </html>

No, gsap doesn't manage any CDNs, so you would have check with the actual CDN.

Sounds like a server error. It doesn't load when I put the file directly in the address bar. https://www.url/jsm/gsap/src/gsap.js You can import from a cdn if you want. import { gsap } from 'https://unpkg.com/gsap@3.6.1/index.js?module'; import { TextPlugin } from 'https://unpkg.com/gsap@3.6.1/TextPlugin.js?module'; gsap.registerPlugin(TextPlugin);

Those are deprecated. Just import gsap and any plugins. Did you see the installation page? https://greensock.com/docs/v3/Installation import {gsap} from 'https://www.url/jsm/gsap/src/index.js'; import {TextPlugin} from 'https://www.url/jsm/gsap/src/TextPlugin.js'; gsap.registerPlugin(TextPlugin); Make sure those files are the modules files. You should exports at the bottom of the file.

The MotionPathPlugin isn't really designed to work with three.js at the moment. That might come at later date. Using that proxy method just isn't going to be accurate because the plugin really only handles position and rotation in 2d. Using constructs that three.js already provides would be a much better option. https://observablehq.com/@rveciana/three-js-object-moving-object-along-path That doesn't mean you can't control it with gsap. Like here, the tubePerc is being animated with gsap, which controls the movement along the path. https://codepen.io/motionharvest/pen/WNQYJyM

If the endValues are different, then yes. If the end values are the same, then you can use an array of targets. const endValue = new THREE.Vector3(20, 50, 40); gsap.to([vector1, vector2, vector3], { ...endValue, onUpdate() { console.log(this.targets()) } });

a would be an object on an object. To tween a vector, just do this. const v = new THREE.Vector3(0,0,0); gsap.to(v, { x: 20, y: 50, z: 40, onUpdate() { console.log(v); } })

I guess it would probably work the same. I was just using the code that was already there. It's in the Timeline docs. https://greensock.com/docs/v3/GSAP/Timeline .getChildren() https://greensock.com/docs/v3/GSAP/Timeline/getChildren() We want nested animations and we want tweens. We don't care about timelines because they don't have .targets(). https://greensock.com/docs/v3/GSAP/Tween/targets()

And this is the main dist file. import { gsap } from "gsap/dist/gsap";

I think you might have to calculate the aspect ratio yourself, and on every resize. Just a simple demonstration showing how to mimic the behavior of svg. So you can play around with the aspectType, alignX, and alignY variables. https://codepen.io/osublake/pen/3fdc4c75dbc38e9cfc06c7723588e79d Instead of messing with the background, I think it's easier to just draw your frames on a canvas element. That way you can treat the canvas element just like an image. https://codepen.io/osublake/pen/fad36ed2ac8608de7070e1caa1055461

So is it working? Or you just have warnings? The way that warning reads makes me think you just need to do this. const withTM = require("next-transpile-modules")([ "gsap" ]);

Sure, in that case I would just do everything inside that resize function. https://codepen.io/osublake/pen/678133da2a5dfa306f2a08352ab76263

@Rodrigo or @elegantseagulls, do you have any ideas on this? I'm not that familiar with react transition group. All I can do is stagger the enter a little. The exit isn't firing. ?‍♂️ https://codesandbox.io/s/gsap-stagger-forked-fjvt1?file=/src/App.js

How about this? https://codepen.io/osublake/pen/ef88f44a9b29289c6b602ac494a44093

Well, you did say tetris style, which is exactly that ? If you want an ease, just use repeatRefresh like this. gsap.to(".block", { y: "+=50", ease: "power4.inOut", repeat: 10, repeatRefresh: true })

Some utils would be good for this, like snap and unitize. https://codepen.io/osublake/pen/afc7526cedf68106bdbf7d4a9954a10a https://codepen.io/osublake/pen/poeNEjm

Well let's start by getting rid of that .add syntax. Also, you don't need delays. That's what the position parameter is for. You also need to make sure you are loading the text plugin. var mw = gsap.timeline({ repeat:-1, onUpdate: updateText, defaults: { ease: "power4.inOut" duration: 1 }); mw.to(proxy, { text: "foo" }) .to(proxy, { text: "bar" }) .to(proxy, { text: "baz" }); function updateText() { myThreeJsTextObjectThatYouCanSetTheTextOn = proxy.innerText; } Don't quite understand what you mean. You don't need to an id or classname. The proxy is the element.