Jump to content

Robert May

  • Content Count

  • Joined

  • Last visited

Posts posted by Robert May

  1. 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.

  2. 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.

  3. Thanks and I really appreciate your help! 


    The presentation will be viewed from a web browser online. I'll try to put together a code pen for you but I've never done one so I will probably be a little slow. :)


    Thanks again.

  4. 4 minutes ago, Dipscom said:

    Are you referring to Blender 3D as in: www.blender.org? If so, GSAP won't be helping you there. Scripting in Blender is done with Python, not JavaScript.


    If you intend to export your models and use them with ThreeJS or Babylon, or similar library then, yes, you'll be able to work with GSAP.


    How familiar are you with the world of 3D on the web?

    His Dipscom, yes it's blender.org along with a plugin called Blend4Web. I'm not familiar with 3D on the web at all, the small amount that I do know, I learned in the last two weeks.


    Right now I can create a nice short animation with Blender and Bled4Web and everything works fine. I have a link in my main presentation but the user has to click a link to open the 3D HTML  in a new window.


    What I would like to do is include the 3D in the same webpage as my main presentation and control it with the same timeline.


  5. 8 minutes ago, GreenSock said:

    Since GSAP can animate literally any value(s), I'm sure we can wire something up that'd handle what you need but I'm not at all familiar with Blender. Do you have a super-simple example you can share with us in Codepen? It doesn't even really have to work, but perhaps you could set up a simple shape that can be controlled with m_trans.set_translation(...). ? 

    Jack thanks for quick reply but it appears from Dipscom's post that it can't be done.

  6. I've been using GSAP to manipulate SVG for a while and now I would like to expand to 3D. Is it possible to use GSAP to do the operation below, if so how would I write the code. Thanks.


    m_trans.set_translation(monkey, 0, 0, 1.5);

  7. Thanks for the reply Shaun. The problem may be that I'm using a text variable "currentTimeline" + "Tl". This gets the name of the timeline and the console logs as "slde1Tl" as it should, but getElementById returns tempTimeline as "null".


    console.log(currentTimeline + "Tl")

    var tempTimeline = document.getElementById(currentTimeline + "Tl")

  8. 19 hours ago, GreenSock said:

    Hm, I'm not entirely familiar with that hardware, but I wonder if the problem has to do with differences in the events that the browser is dispatching. Have you tried to console.log() e and e.detail to make sure it's what you're expecting? Touch-based devices can be very different. You might want to read: 




    Thank you so much Jack, it was the mouse pad itself. The scroll function on the mouse pad is on the far right side of the pad. Thanks again for your reply.

  9. The code below works flawless on my Dell Windows10 computer. I can use my mouse roller wheel or the mouse pad with no issues. The problem is with the techs laptops that I'm training, they use a Windows10 Dell rugged laptop and they don't use a mouse. Any ideas on why the mouse pad will not work on those laptops?  Mouse pad will zoom in other programs our techs use.


    Thanks in advance.



    function zoomSchematic(e){
        switch(e.detail>0) {
            case true:
            if(scaleUp > .5 ){
                scaleUp = scaleUp - .1;
                TweenMax.to(schematic, .5, {scaleX:scaleUp, scaleY:scaleUp, transformOrigin: "50% 50%", ease: Power0.easeNone});
            case false:
            scaleUp = scaleUp + .1;
            TweenMax.to(schematic, .5, {scaleX:scaleUp, scaleY:scaleUp, transformOrigin: "50% 50%", ease: Power0.easeNone});

  10. Solved the issue with:


    var path = document.querySelector(".path");
    var redDotXPos = redDot.getBBox().x + redDot.getBBox().width/2;
    var redDotYPos = redDot.getBBox().y + redDot.getBBox().height/2;
    var blueDotXPos = blueDot.getBBox().x + blueDot.getBBox().width/2;
    var blueDotYPos = blueDot.getBBox().y + blueDot.getBBox().height/2;
    TweenLite.set(path, { x:redDotXPos , y:redDotYPos});


    Great product, great forum.... thanks for all you do!

    • Like 1

  11. Trying to modify osublake's

    See the Pen GMrExO by osublake (@osublake) on CodePen

    pen to put draggable circles and line inside of a very large external svg file. I can't duplicate this on CodePen for some reason but on my computer, when I drag the circles, the line follows but it leaves a huge gap between the circles and the line.


    I've tried everything I can think of, any help would be greatly appreciated. Thanks!

    See the Pen rpQLMB?editors=1010 by RobertMay (@RobertMay) on CodePen

  12. Thanks for your response, I've been playing with the code pen for a while. When I added ".add(pause)" to your code pen it would no longer tween from start to end or end to start, should that be a problem and if so, is there another way to pause the timeline without interfering with tweening the timeline? 

  13. Hi all. Is there a tutorial on how to use labels so that I can test my animations without having to wait for the whole animation to get to the part I'm testing?  I think I remember Carl talking about it in one of his videos but I cannot find it. Thanks!