jacob_truax

That didn't seem to work

Ah yes that makes sense. A lot more simple! I tried but there still seems to be an issue. As you can see the container is below the top header, but for some reason the draggable item no longer goes to the bottom of the page. (Same github link) Thanks so much

Thank you for that! Everything is fixed and pushed to github. I had another question, I am trying to create a different bounding area now. I have it set up like this bounds: {top:200, left:0, width:1000, height:800} but is there a way to make the width something like 100vw? Can I make a variable that is the width of the window and add the variable as the unit?

Oh wow you are right not sure how I didn't notice that. I know questions on here should be GSAP specific but do you know why the height class on the container is not working? I have it set

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

@OSUblake Ahhh wow, so obvious. Thanks!

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>

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);

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?

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.

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(); })