JohneeMac Posted July 23, 2021 Share Posted July 23, 2021 Hi, Been experimenting with Gsap over the last day or 2, and had some fun. The possibilites seem endless, especially with three.js. But i'm stuck. Excuse my newbie js skills, i have a lot to learn.... clearly! Ok, I can get the GTLF imported ok and animated but it's not working correctly. I want the animation to play upon load, and then on hover - go back to the original position and then pause. Upon coming out of hover then restart the animation from the off. Upon load it works and the animation runs. On hover it works, the 3 blocks return to the original location. But on restart from original position its very buggy and the whole animation becomes out of sync. I think the part i'm not getting right is below, ideally they should be declared once? var redShape = scene.getObjectByName("Red"); var greenShape = scene.getObjectByName("Green"); var blueShape = scene.getObjectByName("Blue"); I've tried, kill, restart, destroy, dozens of things but no luck so far. Help greatly apprecated. JM. See the Pen zYwPqKG by johneemac (@johneemac) on CodePen Link to comment Share on other sites More sharing options...
Solution OSUblake Posted July 23, 2021 Solution Share Posted July 23, 2021 Hi Johnee! 1 hour ago, JohneeMac said: I think the part i'm not getting right is below, ideally they should be declared once? var redShape = scene.getObjectByName("Red"); var greenShape = scene.getObjectByName("Green"); var blueShape = scene.getObjectByName("Blue"); It doesn't matter. It will return the same object. Adding it to a variable doesn't create a new one. So use it where ever it makes the most sense. But of course you have to wait for gtlf object to load before using it. var redShape1 = scene.getObjectByName("Red"); var redShape2 = scene.getObjectByName("Red"); console.log("SAME OBJECT", redShape1 === redShape2) // true You shouldn't use new. // BAD var cloudTl = new gsap.timeline({repeat:-1, yoyo: true}); // GOOD var cloudTl = gsap.timeline({repeat:-1, yoyo: true}); You just also use GSAP ticker's instead of requestAnimationFrame. That helps keep stuff in sync with GSAP animations. init(); // animate(); ... // function animate() { // requestAnimationFrame( animate); // renderer.render( scene, camera ); // } gsap.ticker.add(() => { renderer.render( scene, camera ); }); Tweens don't have a position parameter. // BAD gsap.to(redShape.position, 1, { x: 0, y: 0, z: 0 }, 0); // GOOD gsap.to(redShape.position, 1, { x: 0, y: 0, z: 0 }); Eases have a simpler string format. cloudTl.to(redShape.position, 1, { x: 4, ease: "none" }, 0); It might help to go through our getting started and migration guide. And is there any reason you are using the global timeline? function jkill() { gsap.globalTimeline.pause(); } function gooy() { gsap.globalTimeline.play(); startAnimatingBlocks(); } Generally, I would advise against that. The problem is that you have you're creating the same animations over and over again when you hover in and out, so they are going to be conflicting with each other. The simplest solution would be to just create a single animation and then reverse it. It's a little more complicated because you have an infinitely yoyoing animation, but all the methods I used are covered in the Timeline docs. function onEnter() { animation.time(animation.time() % duration).reverse().timeScale(-2); } function onLeave() { animation.play().timeScale(1); } See the Pen MWmOJzv by GreenSock (@GreenSock) on CodePen 3 Link to comment Share on other sites More sharing options...
JohneeMac Posted July 27, 2021 Author Share Posted July 27, 2021 Brilliant answer, thanks! I've got a lot of learning to do. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now