Jump to content
Search Community

Robert May

Members

  • Posts

    37

  • Joined

  • Last visited

 Content Type 

Posts posted by Robert May

    Variable as Transform Origin

    in GSAP

    Posted

    I can use the variable "scale" to scale the schematic and it works great. Can I use a variable for transformOrigin?

    gsap.to(schematic, .5, {scaleX:scale, scaleY:scale, transformOrigin: "0% 0%"});

     

    The end goal is to have the schematic to scale from the mouse position. Schematic is an SVG.

     

    Thanks.

    Animate 3D Mesh along path

    in GSAP

    Posted

    1 hour ago, ZachSaucier said:

    Correct, it's used as a proxy to get the correct values. If you need to do it for a lot of elements, make a function for the creation:

    I think I've got it now. My problem was with the Blender mesh, not applying transforms.🤪

    Thanks for the pen, I haven't tried it yet but I get the idea and I think it'll be perfect. Got to play around with the things I just learned for a bit to get them to sink in lol, then I'll try doing multiples with your code... You are the best, thank you so much for hanging with me!

    Animate 3D Mesh along path

    in GSAP

    Posted

    5 minutes ago, ZachSaucier said:

    So you're saying the movement is correct but the offset is wrong? MotionPathPlugin has a offsetX and offsetY properties you can use that use if that's the case. See the docs for more info.

    Didn't know I could use that, that should work. I don't understand that code that you originally posted, and again I'm a novice, but you created the div but never put the mesh in it, is that correct? I'm asking because I will need to reuse this code over and over on many meshes.

    Animate 3D Mesh along path

    in GSAP

    Posted

    Just now, ZachSaucier said:

    What's off about it? A demo would be helpful :) 

    I'm using a json loader to load a local file on my computer and I don't know enough about CodePen to make it work... sorry, I spent hours trying.

    It follows the path fine but I can't make it line up from the start.

     

    Animate 3D Mesh along path

    in GSAP

    Posted

    @ZachSaucier

     

    Zach I can't get the Code Pen to work and I'm running out of time to get this project done so I may have to abandon following a path.

     

    I got your original code to work but the position is off. Is there a way to accomplish following the path without using the div? Rotation is not an issue, all I want is to animate a sphere down a path to simulate current flow through a wire.

     

    Thanks

    Animate 3D Mesh along path

    in GSAP

    Posted

    2 minutes ago, ZachSaucier said:

    The proxy is to allow MotionPath's rotation to be used. Since in Three.js you have two different objects - one to control the position and another to control the rotation - it's handy to use a single tween on the proxy element and then update the mesh's rotation and position based on that proxy. Does that make sense?

    That makes perfect sense now. :)

    I still can't make it work for my project though, it's giving me"InvalidCharacterError: String contains an invalid character ".

    I'm going to try to make a CodePen for it.

    Animate 3D Mesh along path

    in GSAP

    Posted

    4 minutes ago, ZachSaucier said:

    Like I said in the edit to my post above, to get 3D support you'd have to combine two animations together as is. You could do so in the onUpdate function for one of them.

     

    That is, unless @GreenSock wants to add support for 3D bezier curves :D No promises, but I wouldn't be surprised if he just drops by and adds a plugin to add support for that, hah. He has a tendency to do things like that for interesting problems :) 

    I'm glad you said that lol because I didn't notice the edit part, I think that's the way I will go. It would be awesome if he would add that plugin. GASP is awesome anyway, I wish I could use it on everything I do.

     

    Zach you've been very helpful thank you so much!

    • Like 1

    Animate 3D Mesh along path

    in GSAP

    Posted

    18 minutes ago, ZachSaucier said:

    You can't just replace "#rect" with a reference to a WebGL mesh (align, alignOrigin, and autoRotate wouldn't work), but you can still use MotionPathPlugin to animate the mesh. You just have to make sure that GSAP is pointing to the correct objects and that your camera is able to view where the mesh is.

     

    In order to get autoRotate to work, it's probably best to use a proxy element. Then in the tween's onUpdate you update the mesh's properties. Something like this:

     

    I got it to work but I need to move about in three directions, I need to tween the Z direction also. I have a Python script that outputs the x,y and z coordinates in an array, so I used those coordinates to define my path but it didn't move in the Z direction. I'm thinking MotionPathPlugin doesn't do that.

    Animate 3D Mesh along path

    in GSAP

    Posted

    8 minutes ago, ZachSaucier said:

    Hey Robert. In general, yes. WebGL allows you to have 3D meshes and update their values, so you can move meshes along a path using WebGL. 

     

    Most likely it'd be helpful to use a WebGL library like Three.js. 

     

    Here are a couple of demos that use GSAP 3 and Three.js that may be helpful:

     

    Let us know if you have more specific questions.

    Thanks for the quick response Zach. I am using Three.js but I was hoping to use GSAP to accomplish this.  I've used the code below to tween SVG's and was wondering if I could do the same with an Blender mesh imported into Three.js. 

    gsap.registerPlugin(MotionPathPlugin);
gsap.to("#rect", {
  duration: 5, 
  repeat: 12,
  repeatDelay: 3,
  yoyo: true,
  ease: "power1.inOut",
  motionPath:{
    path: "#path",
    align: "#path",
    autoRotate: true,
    alignOrigin: [0.5, 0.5]
  }
});

    Rotate 3d mesh

    in GSAP

    Posted

    5 hours ago, GreenSock said:

    Part of the problem may be that it looks like you're using a plugin for v2 - your code had three:{...} which was the hint. Version 2 plugins don't work in version 3. The old plugin wasn't an "official" one anyway. 

     

    So are you all set with a solution now? Any other questions we can help with?

    I think you're right Jack. It looks like I'm good to go now. Thank you guys for helping me out.

    • Like 1

    Rotate 3d mesh

    in GSAP

    Posted

    14 minutes ago, ZachSaucier said:

    It's impossible for us to say without seeing what's happening. Got a minimal demo that we can look at? Preferably in a CodePen or something.

    I'll see what I can do and thanks again.

    Rotate 3d mesh

    in GSAP

    Posted

    15 minutes ago, ZachSaucier said:

    Those attempts not working likely means the element is not a DOM element so you can't use GSAP properties like scaleX or x if they don't exist on the object. 

     

     

     

    Zach I'm a novice so forgive me if this is a dumb statement but I changed everything back to GSAP 2 and used the code below and it works as expected. Doesn't that mean that it is a DOM element? Just asking because I don't know.

     

    .to([object], 2, {three:{scaleX:2, scaleY:2, scaleZ:2}})

    Rotate 3d mesh

    in GSAP

    Posted

    31 minutes ago, ZachSaucier said:

    Hey Robert and welcome. Thanks for being a Club GreenSock member! We couldn't do what we do without people like you.

    If you want the animation to be constant you should use Linear.easeNone. So the above would be 

    
TweenMax.to(carBattery, 10, {three:{rotationY:360, ease:Linear.easeNone}})

    That selector doesn't match up with your demo above, but I presume you know that already :) 

     

    I am curious where you're getting the three object from though - did you see a post about loading a Three.js plugin somewhere on the forum?

     

    In the demo above you could animate the cube by using the following in the init function and removing the rotation in the update function: 

    
TweenLite.to(mesh.rotation, 10, {y: Math.PI * 2, repeat: -1, ease: Linear.easeNone});

     

    But I highly recommend that you use GSAP 3 as opposed to the version of TweenMax that you're using (the /latest TweenMax is actually a really old version of GSAP). Then it's more simple: 

    
gsap.to(mesh.rotation, {duration: 10, y: Math.PI * 2, repeat: -1, ease: "none"});

    Wow thanks Zach. Yes I realize the selector doesn't match. :) I grabbed some code from the three.js samples page to give a quick example of my issue.

     

    I did try to migrate over to GSAP 3 but I had a few issues like scaleX was flipping my object upside down. Also had some issuesI'm under pressure on a project that I'm working on right now so I don't have time for learning new things. It does look pretty cool though and I will change over when I get a chance.

     

    I know very little about 3D but for the presentations that I'm doing it's incredibly useful. I combine SVG drawings with 3D objects and control animations for both on a gsap timeline.

     

    Thanks for your help... I'll probably be back for more. :)

    Rotate 3d mesh

    in GSAP

    Posted

    Hello. I've been able to use TweenMax to duplicate the rotation action of the cube using the code below. It works, but the rotation starts out fast and then slows down as it completes the revolution.  I have tried using different eases but the ease doesn't seem to have any effect. Does easing work with what I'm doing? Thanks!

     

    TweenMax.to([carBattery], 10, {three:{rotationY:360, ease:Back.easeOut}})

     

    I tried to get this in the code pen but I never could make it work, sorry.

    See the Pen vYOyygM?editors=0010 by RobertMay (@RobertMay) on CodePen

    Tween Blender 3D

    in GSAP

    Posted

    10 hours ago, Dipscom said:

    This Blend4Web is a much bigger thing I thought it was. They seem to have an API and web player as well as its own library. They have an API and all sorts of things (which I did not read into yet). There might be a way to control assets from the outside.

     

    I am a bit swamped today to try and write some tests so, let's stay in the theory for now.

     

    Why do you need (want?) to animate elements exported using GSAP? It appears the plugin gives you the ability to bake in animations and gives you mouse/touch control from the get-go.

     

    In their examples, they show how to iframe the exported assets so, you could in theory, add it to your presentation using that technique. I think your issue is more familiarity with web and this plugin over GSAP. If that's the case, I can see if I can help you iFrame your exported assets into your presentation even though it is not GSAP related. We'll move into a private chat for that, though. I'll lose brownie points if we detour the forums from GSAP related dicussions.

     

    I'd follow ¯\_(ツ)_/¯ suggestion (jeez why? WHY? WHY? I can't tag you here with that username... -.-) and read over the links referred if you have any interest in learning about 3D in the web, they are very good resources.

     

     

    I can and have done the iframe option and that does work but if it can be done, I would prefer to control everything with the single GSAP timeline.

     

    I'm creating basic electricity e-learning modules for GE Appliances service technicians. The module I'm working on right now is AC generators. It starts with animating a sine wave and simulating AC current on a wiring diagram... all of this is done by animating SVG. Next step is to play a simple generator animation that illustrates how the generator works.

     

    Using the iframe method, the GSAP timeline has to pause, then the generator animation has to play. After it plays, the user has to click play on the GSAP timeline to continue with the main presentation. I want GSAP to control the SVG and 3d animation because it would play both seamlessly.

    Tween Blender 3D

    in GSAP

    Posted

    19 hours ago, ¯\_(ツ)_/¯ said:

    Hi @Robert May

     

    I was previously not familiar with the Blend4Web option, but I would maybe suggest using this workflow:

     

    Blender --> Export glTF --> Three.js --> GSAP

     

    The following links and examples should provide solid insight into that workflow if you're interested.

    Hopefully something from those will maybe help to assist your efforts and desired goals.

     

    ¯\_(ツ)_/¯

     

    PS: I am curiously excited to see what @Dipscom works up after some coffee(s).

    Thanks for the links, I will check them out and see if I can make it work.

1
2
Page 1 of 2  
×
×
  • Create New...