klipartstudio

Hi Team, I have a vue/aframe project I am working on and I am using gsap.timeline() to animate the 3d objects. I store the timeline in a variable called animation. After clicking on a button I want to wipe out the timeline from the object before I leave the page. The issue I am having is that timeline doesn't kill the animation. When I console.log this.animation I still see the instance of gsap timeline with all the tween in it; also when I do a this.animation.getChildren() I see all the tween also. To make sure I was not going crazy. I made a window.ani variable and set it to be the timeline. Manually calling the window.ani.kill() in the browser console also did not remove it. I have never ran into this issue ever animating divs. Is there an issue with timeline animating threejs objects in Aframe? Just curious if anyone else ran into an issue like this. setTimeout(() => { this.animation = gsap .timeline({ repeat: 5, repeatDelay: 5 }) .clear() .to(this.colorObjectB.object3D.position, 0.2, { y: 1.2, ease: "none", }) .to(this.colorObjectB.object3D.position, 0.1, { y: 1, ease: "none", }) .to(this.colorObjectB.object3D.position, 0.2, { y: 1.2, ease: "none", }) .to(this.colorObjectB.object3D.position, 0.1, { y: 1, ease: "none", }) .to(this.colorObjectB.object3D.rotation, 3, { y: 360 * (Math.PI / 180), ease: "none", }); window.ani = this.animation; console.log('this.animation ', this.animation); }, 3); Here is the code in the function I am using to wipe the timeline this.animation.kill();

Thanks akapowl, This fixed the original issue with the scrolling but introduced a new issue. The new issue is related to ScrollerTrigger automatically reading the location of the pinned class ".gallery" and adding values to the left and top of this class which has a position: fixed;. This would work if the initial page load placed the pinned element in the right place. On initial load it seems like the vales ScrollerTrigger added to the top:1321.797875px; and left: 195px; is that. Which the left is right but the top is off. I then did a check of the height using window.innerHeight and returned this 659px. To fix this issue I just made a function that reads the height of the browser window and offset it by my carousel height. This is due to my situation I needed it pinned to the bottom of the mobile phone browser. Below I included my method. If you have a better solution I would love to hear it. function resize() { let sizeH = window.innerHeight; gsap.set('.gallery', {top:sizeH-175}) } One other issue seems like the elements on the left and right of the center one sometimes disappears. I assume it is hitting some wrap threshold and popping it out.

Hi Team, Long time user of greensock since flash days; Great product. I need to build a infinite scroller menu which I found tons of examples on the web. I landed on an example that I see your team shares often on here which works well in most cases. My issue is now I am using it for a webAR projects which needs to have the body tag position:fixed; this cause it to not work. I forked the example you share and just added the extra code in the body tag css and it stopped working properly. The button stop working and the drag does not always center. This is due to the scroller using the page scroll which when set body tag on fixed it has no scroll. I was hoping you have ran into this before or can point me in the right direction to fix this issue. I appreciate all you do for us. Thanks