ninmorfeo

Perfect... it's much simpler than I thought thanks a lot !

I am trying to convert a project made with gsap 2 to gsap 3. As expected I have some difficulties that I hope I will slowly get over. I am trying to convert the old cycle method with the new wrap, but without success. Could you tell me how to correct this code? //old method // function init_x_pos() { // let valore = [100]; // // let new_x = valore[0]; // for (i = 0; i < n_carte_totali; i++) { // // new_x += 25 // valore.push(new_x) // } // // return valore; // } let valore = gsap.utils.wrap([0,100,200,300]); //new method with static value for now let a_c_i = gsap.timeline(); a_c_i.fromTo(chi, { stagger : { each: 0.5, }, // cycle: {//old method // x: init_x_pos() // }, modifiers: { x: x => valore() }, y: 250, rotationX: 10, rotationY: 0, rotationZ: 0, scale: 1, opacity: 0, boxShadow: ' -20px 20px 15px 0px rgba(0,0,0,0.1)', ease: Elastic.easeOut.config(1.1, 0.6) }, { duration:0.5, stagger : { each: 0.5, }, // cycle: {//old method // x: init_x_pos() // }, modifiers: { x: x => valore() }, y: 30, rotationX: 10, rotationY: 0, rotationZ: 0, scale: 0.7, boxShadow: ' -20px 20px 15px 0px rgba(0,0,0,0.1)', opacity: 1, ease: Elastic.easeOut.config(1.1, 0.6) }) I would like each x stagger to change according to the values shown in the wrap array.

thanks !

hi, as the title says: how can I draw a bezier curve or more generally a path in gspa 3 to use with motion path plugins? is there some tool online to accomplish task?

italian ...im using traslator

I feel sad ... I can't explain myself ... I wrote it in every answer. Maybe i hope is not the problem with my English, I don't write well ... I don't have to kill the drag of the released object, but that of everyone else: (((((

the demo is present in the first post above. Obviously it's not exactly the project I'm doing, but if I can figure out how to edit the demo at the top I will be able to bring it back to my project as well. As you can see there are a series of squares on which the dragging is attached, it would be enough for you to show me how to eliminate the draggin g from all objects after you have placed a square in the dropping area. Exactly as it is reported in the codepen js code that I posted, instead of the Draggable.get (". Box"). Kill () line; instead there should be the function that allows me to kill all the drag

I thought there was a more immediate method ... I have a deck of 40 cards, the user chooses 10 cards using drag and drop, after which I have to make sure that the dragging function is no longer attached to the remaining cards. So to solve I have to create an array with 40 cards, eliminate the selected cards from the array and only end up cycling on the cards left in the array and use the kill command on each instance? a bit hateful .... If there is no other way I think that in the future a solution should be implemented in the draggable class, because all the other libraries I used have a method to eliminate dragging, in some libraries it was enough for me to simply delete the class from the objects, for example if a div had the class "drag", it was enough that I eliminated such class through jquery

no solution ?

hi thanks for answare but i don t want kill single istance....but all ones

it seems that it doesn't work, i wish to kill all drag instance ... Draggable.create(".drag_item", { bounds: $('.drag_zone'), edgeResistance: 0.9, type: "x,y", throwProps: true, throwResistance: 2000, maxDuration: 0.2, onRelease: function () { if (this.hitTest('#dropzone')) { Draggable.get(".drag_item").kill(); } else { tmax.to(this.target, 0.1, { rotationX: 20, scaleX: 0.6, scaleY: 0.6, boxShadow: "-2px 2px 5px 0px rgba(0,0,0,0.75)" }); } } });

thank you very much, if I don't ask for too much I could know what exactly this istruction does? index% 2

mmm in the example you posted I see that only 2 are moving, if I wanted others to move too?

Obviously the code is wrong not knowing how to proceed. My intent is to make sure that in the last stagger, the squares move by -40 pixels from the current x to the left ones and +40 px to the right ones. Currently, they move to the absolute x position of 40

What is the correct syntax for returning to the function the x increment of 40px instead of the absolute position? in the example below, the "+ =" and the "- =" are not read and the objects move to x = 40 .staggerTo(chi, 0.5, { cycle: { rotationY: ["-=20","+=20"], x: function () { var xpos=["-=40","+=40"]; /* xpos="+="+xpos*/ return xpos } }, rotationX: 0, ease: Power4.easeOut }, 0) thanks

it work great! function init_x_pos() { var valore = []; var new_x = 150; for (i = 0; i <= n_carte_totali; i++) { new_x += 35; valore.push(new_x) } return valore; } var a_c_f = new TimelineMax(); a_c_f.staggerFromTo(chi, 1, { cycle: { x: init_x_pos() }, y: 250, rotationX: 10, rotationY: 0, rotationZ: 0, scale: 1, opacity: 0, boxShadow: ' -20px 20px 15px 0px rgba(0,0,0,0.1)', ease: Elastic.easeOut.config(1.1, 0.6) }, { cycle: { x: init_x_pos() }, y: 140, rotationX: 10, rotationY: 0, rotationZ: 0, scale: 0.7, boxShadow: ' -20px 20px 15px 0px rgba(0,0,0,0.1)', opacity: 1, ease: Elastic.easeOut.config(1.1, 0.6) }, 0.3)

thanks a lot

the upadate method of the variables I used in tweenMax.to does not seem to work well with the stagger method, perhaps because it is called only once and therefore does not have a control index (it would seem). In fact, if I try to use console.log in the following function for the X property, it always returns the value 0. Unable to rely on index, is there another way to calculate different X values for each iterated object? var a_c_f = new TimelineMax(); a_c_f.staggerFromTo(chi, 1, { x: function (index, target) { console.log(index) new_x=200+((index+1)*35); return new_x }, y: 250, rotationX: 10, rotationY: 0, rotationZ: 0, scale:1, opacity: 0, boxShadow: ' -20px 20px 15px 0px rgba(0,0,0,0.1)', ease: Elastic.easeOut.config(1.1, 0.6) }, { x: function (index, target) { new_x=200+((index+1)*35); return new_x }, y: 140, rotationX: 10, rotationY: 0, rotationZ: 0, scale:0.7, boxShadow: ' -20px 20px 15px 0px rgba(0,0,0,0.1)', opacity: 1, ease: Elastic.easeOut.config(1.1, 0.6) }, 0.3)

it was exactly what I was looking for(function based value) ... sometimes clues are enough for me: P next time I'll try to use codepen thanks a lot for now

or I asked a stupid question or is it more complicated than when I thought can anyone help me?

Ok, I'm making progress, but i need your help one more time....now I'm stuck on the last instruction you see in the timeline. i have ten cards and I would like all the cards to go simultaneously to the specified x position (animating the left property) but with an offset of 10px in y from each other (animating the top property). how do i increment the distance_y variable? var distance_y = 10; function anim_card_shuffle(chi) { var a_c_f = new TimelineMax(); a_c_f.staggerTo(chi, 1, { top: 150, opacity: 1, ease: Elastic.easeOut.config(1.1, 0.6) }, 0.3) .staggerTo(chi, 1.5, { left: '-=70', rotationY: 180, rotationX: -10, boxShadow: '20px 20px 15px 0px rgba(0,0,0,0.1)', ease: Power4.easeOut }, 0.05) .staggerTo(chi, 0.5, { left: '+=50', ease: Power4.easeOut }, 0.05, "-=2.2") .to(chi, 0.5, { left: 550, top: '-='+distance_y, ease: Power4.easeOut }, "-=0.5") return a_c_f; } anim_card_shuffle('.empty') can you help me ?

ok I understood that it is better to create objects first, assign a class and then decide whether to animate them in groups or singularly rather than refer to the ids of objects and iterate the animations as I did with velocity

I have always used velocity.js for my animations and being new to the gsap world I still have to get used to how the animation sequences are linked. I had already created this animation with velocity, but now I'm trying to replace the code using the gsap libraries. So my current problem is that I have a series of cards that enter the table in sequence with a delay of 0.3 seconds one from the other. In practice, the first line of the function I report below. I wish that once all the cards have entered the table, start the second statement that flip card one by one ( again with an associated delay). What is the best way to proceed? function anim_card_shuffle (chi, time, time2) { var a_c_f = new TimelineMax(); a_c_f.to(chi, 1, { top:150, opacity:1, ease: Elastic.easeOut.config(1.1, 0.6) }, "in_card").delay(time) .to(chi, 1.5, { rotationY:180, ease: Power4.easeOut }, "flip_card").delay(time2) return a_c_f; } $.each(carte_dorso, function (index) { time += 0.3; time2 += 0.5; anim_card_shuffle($('#id_' + index + '_card'),time,time2) }); I think that once I understand the workflow I can go with my project: P

oh thank you ... sorry but I'm newbie

like this? throwProps: {resistance: 150}, in the help guideline i read: throwProps: {x: 500, y: -300, resistance: 150} but i haven't x and y position .... they depend on the direction of dragging