affka

Hi! I have a class which has a property "dragger". To this dragger property I assign GSAP Draggable new instance: this.dragger = new Draggable(element, { bounds: ".container", edgeResistance: 0.65, type: "x,y", inertia: true, autoScroll: true, liveSnap: true, onDragEnd: _self.onDragEnd, onDragStart: _self.onDragStart, onDrag: _self.onDrag, onDragScope: this, }); As above, you can see there is a settings of "onDragScope" set to "this" (I have tried to set "this" to "_self" variable outside and then assign it but same result). When running onDrag runs, it logs me a GSAP Draggable instance instead of the class which has "dragger" property. Any ideas why? onDrag() { console.log("drag", this); // logs GSAP Draggable instead of class } Thanks for the ideas.

.then() function helps in solving my first issue, just that it came with another - tweens with .then callbacks breaks repeat settings for parent timeline. Regarding your question: If someone clicks the left button, do you want both cubes to rotate? Or just one? If just one, are there going to be buttons for every cube? In my case, I do not have buttons, but rather a scroll event when mouse is being hovered on any cube. So for simplicity, let's say, buttons for each cube. What I want is that when user clicks a button (of any cube, or scrolls on any cube in my case) for master timeline keep its' time settings so that when clicking and calling rotate(). rotate(dir = 1, origin) { this.iteration += dir; let delay = origin === "mouse" ? 0 : 2; console.log("rotate", this.iteration % 4, "wall data"); let tl = gsap.timeline(); console.log(this.iteration); tl.to(this.productCube, { rotateY: this.iteration * 90, delay: delay, duration: 2, overwrite: true, }); return tl; } it wouldn't interfere (make any changes in regards to time) with: startRotation() { console.log("start rotation"); let tl = gsap.timeline(); tl.add(this.rotate()) .then(() => this.rotate()) .then(() => this.rotate()) .then(() => this.rotate()); return tl; Any help is appreciated.

I appreciate your help a lot. The full idea of what I want to achieve can be seen at the codepen below, although there is a lot of smelly code not related to GSAP so I do not recommend diving into it. The idea is several cubes or more, where everyone rotates from 0 to 360, or does any animation of any sort by 0.5 delay from the previous cube, and repeats the cycle after all cubes have finished the animation. In addition, the animation must be playable by outside interactions. So I at the moment I have a rotate method (in ProductCube) which rotates the cube by 90 degrees to a given direction: rotate(dir = 1, origin) { this.iteration += dir; let delay = origin === "mouse" ? 0 : 2; console.log("rotate", this.iteration % 4, "wall data"); let tl = gsap.timeline(); console.log(this.iteration); tl.to(this.productCube, { rotateY: this.iteration * 90, delay: delay, duration: 2, overwrite: true, }); return tl; } Furthermore, I have a method to start initial timeline for one single cube, to rotate the cube from 0 to 360 degrees. startRotation() { console.log("start rotation"); let tl = gsap.timeline(); tl.add(this.rotate()) .then(() => this.rotate()) .then(() => this.rotate()) .then(() => this.rotate()); return tl; Lastly, I have another class and method (in ProductShowcase) which starts rotations for all cubes. init() { let tl = gsap.timeline({ repeat: this.repeat, repeatDelay: this.repeatDelay, delay: this.delay, }); tl.addLabel("start") .add(this.cubes[0].startRotation(), "start") .add(this.cubes[1].startRotation(), "start+=0.5") .add(this.cubes[2].startRotation(), "start+=1"); this.animation = tl; } Additionally, I have a function for user interactions which upon scroll rotates any cube additionally. function cubeScroll(target, event) { window.clearTimeout(isScrolling); isScrolling = setTimeout(function () { console.log("Scrolling has stopped.", event.deltaY); console.log(target); if (event.deltaY < 0) { target.rotate(-1, "mouse"); } else if (event.deltaY > 0) { target.rotate(1, "mouse"); } }, 200); } My Issues: The main timeline "init" does not repeat if any child tween has .then() callbacks If I use .add() instead .then(), then all tweens starts from 0, which basically ends up with the last one, from 0 to 360 running instantly rather than by slice, 0-90, 90-180, so on. Will try ".fromTo" in the meantime, by remembering the last degree. any rotate from anywhere else than the main timeline ( in "init" method) breaks the timeline. If you would try to to scroll on the second cube, it would fall out of the chain, and later on, would be the last rotating cube. Will try to have a seperate tween for it. https://codepen.io/affkatron/pen/yLezLGm?editors=0010 Thanks for your ideas in advance.

Hi, Thanks for a demo, seems like I am getting a better understanding of GSAP. However, I am still stuck with 2 issues: The chain of animation does not repeat if gets added to another timeline: function startRotation(element) { let tl = gsap.timeline(); tl.add(rotate(1, element)) .then(() => rotate(1, element)) .then(() => rotate(1, element)) .then(() => rotate(1, element)); return tl; } // Master timeline let tl = gsap.timeline({ repeat: -1, repeatDelay: 1, delay: 1, }); tl.addLabel("start") .add(startRotation(1), "start") .add(startRotation(2), "start+=0.5") I am working with several cubes and want them to rotate independently thus I wrap the rotation flow into "startRotation" tween and return it to master tween where I can change their start time in the master timeline. However, the master timeline's repeat settings do not seem to apply. If I have startRotation as follows: let tl = gsap.timeline(); tl.add(rotate(1, element)) .add(rotate(1, element)) .add(rotate(1, element)) .add(rotate(1, element)); return tl; where then() gets replaced by add(), then repeat of master timeline works. Why is that so? How the method then() changes the behavior of a tween? Another issue is that startRotation() tween gets "broken" if I rotate() the cube from any other interaction (let's say button click). By broken I mean that let's say initially each rotate() has delay of 2 seconds, but if I rotate() the cube from somewhere else in the middle of the chain, then the next rotation from the chain gets extended by 2 seconds from the last user initiated rotate(), not from the last rotate() in the initial chain. How do I make that rotate() delay setting gets applied only to rotations set in startRotation and ignores any other rotate(). Would having another tween for user interactions fix this? Or is it solvable with one tween (would be more convenient as there might be a lot of user interaction origins and I would like to stick with only one tween for them all)? https://codepen.io/affkatron/pen/BajdJEN Huge thanks!

Thanks for such quick reply! My goal is to have a cube (basically 4 walls) which would rotate by 90 degrees (would show a new wall upon each rotation). When I do this: let tl = gsap.timeline(); tl.addLabel("start").add(rotate(90)).add(rotate(180)).add(rotate(270)).add(rotate(360)); I achieve my goal, but I also want the cube to be interactive, so that user could also rotate it either back or forward, thus I need global variable which would remember by many degrees cube has rotated so far. Thus I do this: let tl = gsap.timeline(); tl.addLabel("start").add(rotate()).add(rotate()).add(rotate()).add(rotate()); and use the global variable inside rotate(), by incrementing current degree by 90 upon each rotation. The issue I am facing is that it calculates the degree when I am adding it to timeline, not when rotate animation actually happens which makes sense because I am calling the function rotate() when I am adding it to timeline. Would approach below would be correct? let tl = gsap.timeline(); tl.addLabel("start").add(rotate).add(rotate).add(rotate).add(rotate); Or how I could achieve it? Thanks.

Hey, I believe my issue is simple just that I do not find how to solve it in documentation. I have an object which initiates timeline animation: let tl = gsap.timeline(); tl.addLabel("start").add(rotate()).add(rotate()).add(rotate()).add(rotate()); "rotate" function: function rotate(direction) { let newDegree; newDegree = direction !== undefined ? direction ? degree + 90 : degree - 90 : degree + 90; if (newDegree > 360) newDegree = 90; if (newDegree < 90) newDegree = 360; let tl = gsap.timeline(); tl.to(".product-cube", { rotateY: newDegree, duration: 2, onComplete: () => { changeDegree(newDegree); }, }); return tl; } The thing I want to achieve is that upon each rotate, the variable "degree" gets increased/decreased by specific amount, however, it gets increased only once upon each iteration and it is always 90 (initially degree is 0). I believe it is due calling rotate() when adding to timeline. Another issue, when animation ends and when I start another iteration of 4 rotations, it immediatelly gets back to default state (degree 0) where I would like it to go from 360 to 90 instead of 360 to 0 instantly(360 is same as 0, but as it goes from 360 to 0 it goes backwards) and then to 90 as supposed. Is it possible to "pause" animation(timeline) at its current state (degree variable) when it gets called again? I could go from 360 to 450 and so on, but as it is my first issue, the rotate() animation doesn't care about global constants. Let me know if my issue not clearly explained. Thanks.