Jump to content
Search Community

jacob_truax

Members

  • Posts

    12

  • Joined

  • Last visited

 Content Type 

Posts posted by jacob_truax

    Draggable div always goes to the top of page instead of where you throw it

    in GSAP

    Posted

    Hello, 

     

    As said above, I am having an issue where when I throw or drag the draggable div it is always bound to the top of the page like a magnet. I didn't set it like this, and can't figure out how to let it move where ever it is being thrown. Does anyone know why this is happening?

     

    Here is the link to the repository and to the site. 

    https://github.com/jacobtruax/Mole-End

    https://jacobtruax.github.io/Mole-End/

     

    Thanks

    Performance issues with TimelineMax and Three.js

    in GSAP

    Posted

    Ah wow ok I totally see what you mean. Thanks!

    I have another little question. 

     

    Before, I was animating the autoAlpha of an h2 element when you clicked on the three.js objects (the "more" button on my website) and it was working just fine. However, I changed the h2 element to a link and now the animation is lagging and running slower than expected. Do you know why this would happen? Below is my javascript and html. 

     

    I would understand if it was the same issue as above, but as you can see I am animating other h2 elements just fine. It was only when I switched the "more" element from a h2 to a link in my html that it started acting slow. Again you can see this in action here: jacobtruax.info

     

    Thanks!

     


    JS 

    const moreTag = document.getElementById("more")



const tl = new TimelineLite()

TweenMax.set(moreTag, {autoAlpha:0});



function onDocumentMouseDown(event) {
      const intersections = raycaster.intersectObjects(objects)
      if (intersections.length > 0){
        if(projectHov){
          tl.play();
          tl.to(footerTag, .5, {delay: 1, autoAlpha: 1,}, 0);

          tl.to(backTag, 1, {
            delay: 1.25,
            autoAlpha:1,
          }, 0);
          tl.to(moreTag, 1, {
            delay: 1.25,
            autoAlpha: 1,
          }, 0);
        }

}



backTag.addEventListener("click", function() {
  projectHov = true
  groupRotate = true
  tlOld.reverse();
  tlAlex.reverse();
  tlCam.reverse();
  tlFNUP.reverse();
  tl.reverse();
})

     

     HTML 

    <div class="back">
    <h2 id="back">Back</h2>
  </div>

  <div class="more">
    <a href="work.html" id="more">More</a>
  </div>

     

    Performance issues with TimelineMax and Three.js

    in GSAP

    Posted

    Yes that is extremely helpful thank you. Its seems though that just switching the lines where I add a tweenMax

      

    tlCam.add(TweenMax.to(cam, 1.5, {three:{scaleX: 2.5, scaleY: 2.5, x:0, y:0, z:0}, ease:Power2.easeInOut}));

     

    to this solved the problem. Is it because now I am not creating child animations?

      

    tlCam.to(cam, 1.5, {three:{scaleX: 2.5, scaleY: 2.5, x:0, y:0, z:0}, ease:Power2.easeInOut}, 0);

     

     

    Performance issues with TimelineMax and Three.js

    in GSAP

    Posted

    Ah wonderful I am sure that is the issue! I will look into the docs and read about it. Now I feel like I see the issue, everytime I am clicking something I am recreating that timeline, where as I was thinking it was only creating it the once and then replaying it when the same object was clicked again. But actually its replaying the initial one and adding a new one correct? And the best way to get around this is to clear(). Is there a way to just replay a tween considering its already been reversed?

    Performance issues with TimelineMax and Three.js

    in GSAP

    Posted

    43 minutes ago, GreenSock said:

    I don't really have time to dissect this, but a few quick thoughts:

    1. It looks like you're reusing the same timelines and you keep adding more and more and more tweens to them on every mousedown. That sounds very wasteful and problematic to me. After 5 clicks, you'd probably have 5 of the same tweens fighting to the control the same properties of the same object, though overwriting should handle the conflicts you still end up with a bunch of tweens running that don't need to be. I'm not even sure you need to use timelines for this (and it's not "wrong"), but I'd probably just fire off new tweens (or create a new timeline each time...that's totally fine). 
    2. If you're always animating to() certain values, are you potentially starting at values that are closer and closer to those end values, thus it LOOKS like things are slowing down just because of the logic you're using? So, for example, if the first time you animate from 0 to 1000 over the course of 1 second...but it only gets to 500 before you do something else...and then the user clicks again and it's now going from 500 to 1000 over the course of 1 second - that would move half as fast. See what I mean? 

     

     

    1. I am kind of confused by this. It is not aa document mousedown, it is only when a three.js object has been raycasted (clicked). Though, I am reusing the same timeline, I was under the impression that was the point of the timeline? So a timeline is innitiated, it plays out, and to start another the user has to hit the "back" button which would then reverse() the initially selected timeline. If the person clicks the same object as the first time again it would then play() the timeline again. Is this bad practice? are they compiling somehow and thats slowing them down? 

     

    2.To answer your second point, it always finishes the to() before another timeline can be triggered, becuase the objects that fire off the timelines disappear once one starts.

    Performance issues with TimelineMax and Three.js

    in GSAP

    Posted

    Hello, 

     

    I am pretty new to GSAP and so I may be doing something wrong, but I am having a performance issue with multiple back and forths animating three.js objects and then reversing them. 

     

    As you can see on my project (linked below) when you click the three.js objects and then click the back button all the animations work fine. But the more you click them, the slower they start to become and the longer the reverse animation takes on the objects and on the text. Now I am not sure if I set it up wrong and its just an issue with my code, or whether its a performance issue. Can someone please see my GSAP code below and see if they can pin point what might be happening?

     

    Here is a link to my project: http://jacobtruax.info/

     

    Code for the Tweening: 

    const tl = new TimelineLite()
  const tlFNUP = new TimelineLite()
  const tlOld = new TimelineLite()
  const tlAlex = new TimelineLite()
  const tlCam = new TimelineLite()
  TweenMax.set(backTag,{autoAlpha:0});
  TweenMax.set(footerTag, {autoAlpha:0});
  TweenMax.set(moreTag, {autoAlpha:0});



function onDocumentMouseDown(event) {
      const intersections = raycaster.intersectObjects(objects)
      if (intersections.length > 0){
        if(projectHov){
          tl.play();
          tl.add( TweenMax.to(footerTag, .5, {delay: 1, autoAlpha: 1,}));

          tl.to(backTag, 1, {
            delay: 1.25,
            autoAlpha:1,
          }, 0);
          tl.to(moreTag, 1, {
            delay: 1.35,
            autoAlpha: 1,
          }, 0);
        }


        if (intersections[0].object == old ) {
          if(projectHov){
            tlOld.play();
            projectHov = false
            tlOld.add(TweenMax.to(old, 1.5, {three:{scaleX: 2.5, scaleY: 2.5, x:0, y:0, z:0}, ease:Power2.easeInOut}));
            tlOld.to(fnup, 1, {three:{y:-4000, opacity: 0 }, ease:Power2.easeInOut}, 0);
            tlOld.to(alex, 1, {three:{y:-4000, opacity: 0 }, ease:Power2.easeInOut}, 0);
            tlOld.to(cam, 1, {three:{y:-4000, opacity: 0 }, ease:Power2.easeInOut}, 0);
            tlOld.to(mirrorCube, 1, {three:{y:-400, opacity: 0 }, ease:Power2.easeInOut}, 0);
          groupRotate = false
        }

        }
        if (intersections[0].object == fnup) {
          if(projectHov){
            tlFNUP.play();
            projectHov = false
            tlFNUP.add(TweenMax.to(fnup, 1.5, {three:{scaleX: 2.5, scaleY: 2.5, x:0, y:0, z:0 }, ease:Power2.easeInOut}));
            tlFNUP.to(old, 1, {three:{y:-4000, opacity: 0 }, ease:Power2.easeInOut}, 0);
            tlFNUP.to(alex, 1, {three:{y:-4000, opacity: 0 }, ease:Power2.easeInOut}, 0);
            tlFNUP.to(cam, 1, {three:{y:-4000, opacity: 0 }, ease:Power2.easeInOut}, 0);
          groupRotate = false
          tlFNUP.to(mirrorCube, 1, {three:{y:-400, opacity: 0 }, ease:Power2.easeInOut}, 0);
        }

        }
        if (intersections[0].object == cam) {
          if(projectHov){
            tlCam.play();
            projectHov = false
            tlCam.add(TweenMax.to(cam, 1.5, {three:{scaleX: 2.5, scaleY: 2.5, x:0, y:0, z:0}, ease:Power2.easeInOut}));
            tlCam.to(fnup, 1, {three:{y:-4000, opacity: 0 }, ease:Power2.easeInOut}, 0);
            tlCam.to(alex, 1, {three:{y:-4000, opacity: 0 }, ease:Power2.easeInOut}, 0);
            tlCam.to(old, 1, {three:{y:-4000, opacity: 0 }, ease:Power2.easeInOut}, 0);
          oldRotate = false
          groupRotate = false
          tlCam.to(mirrorCube, 1, {three:{y:-400, opacity: 0 }, ease:Power2.easeInOut}, 0);
        }
        }
        if (intersections[0].object == alex) {
          if(projectHov){
            tlAlex.play();
            projectHov = false
            tlAlex.add(TweenMax.to(alex, 1.5, {three:{scaleX: 2.5, scaleY: 2.5, x:0, y:0, z:0}, ease:Power2.easeInOut}));
            tlAlex.to(fnup, 1, {three:{y:-4000, opacity: 0 }, ease:Power2.easeInOut}, 0);
            tlAlex.to(cam, 1, {three:{y:-4000, opacity: 0 }, ease:Power2.easeInOut}, 0);
            tlAlex.to(old, 1, {three:{y:-4000, opacity: 0 }, ease:Power2.easeInOut}, 0);
          oldRotate = false
          groupRotate = false
          tlAlex.to(mirrorCube, 1, {three:{y:-400, opacity: 0 }, ease:Power2.easeInOut}, 0);
        }

        }

      }
  
  backTag.addEventListener("click", function() {
  projectHov = true
  groupRotate = true
  tlOld.reverse();
  tlAlex.reverse();
  tlCam.reverse();
  tlFNUP.reverse();
  tl.reverse();
})

     

×
×
  • Create New...