ninmorfeo

I dont know if i found another bug, but if i try to concatenate an animation after cloning object, you can see that this object created dont go at center of drop zone, like if transform-origin was ignored....can you do check please? i added function at the end of previous script pen To replicate: drag card in space then click on clone element button.

oh i was going crazy, it was a day that i was banging my head. So do I have to wait a week to continue my project or can I already use this file you sent me?

Well I had another question to ask but before I got there I got stuck first. In this post I have 2 questions to ask. The first one: why do gsap.set and gsap.to have different behaviors regarding the same function? I read in the docs that gsap.set is nothing more than a gsap.to with duration 0, but if you try to drag a card from the curve to the drop area you will see that the final positioning is different (you can swipe gsap.to and gsap.set with the button on the left). The second question is: why do it give me a error when I try to copy the transformations of one of the cards on a dynamically created object? You can test and watch the console by clicking on a draggable card and then on the button on the left 'clone object' (the function that manages cloning is at the end of the code).

ok nevermind i found it thanks

can you make a example please? how can i get $('.carta_estratta') transform property?

Hi how can i copy transform on object from another one? ( i have to place a dinamic object at same position of exsisting object) Console give me this error: gsap.min.js:10 Uncaught TypeError: Cannot read property 'style' of undefined at GSCache.getSetter [as set] (gsap.min.js:10) at PropTween._renderPlain [as r] (gsap.min.js:10) at PropTween._renderPropTweens [as r] (gsap.min.js:10) at _renderZeroDurationTween (gsap.min.js:10) at Tween.render (gsap.min.js:10) at new Tween (gsap.min.js:10) at Object.set (gsap.min.js:10) at HTMLDivElement.<anonymous> (tarocchi-zingara-build.js:1152) at HTMLDivElement.dispatch (jquery.js?ver=1.12.4-wp:3) at HTMLDivElement.r.handle (jquery.js?ver=1.12.4-wp:3) the code that i try to use is this one: $('.carta_estratta').on('click', function () { let z_ogg='#'+$(this).attr('id'); matrice= $(z_ogg).css("transform"); console.log(matrice) gsap.set('#'+$(this).attr("id") + '_card', { transform: matrice }); }); in console log i can see result of Matrice....matrix3d(0.6, 0, 0, 0, 0, 0.563816, 0.205212, 0, 0, -0.34202, 0.939693, 0, 685, -96, 0, 1)

thanks a lot

Is there any way to stop the elements that move on the path in a certain position? In the example in question, I would like the squares at the end of the animation to be positioned equidistantly on the bezier curve. I could divide the length of the curve by the number of elements but I don't know how to stop them.

it s working now...thanks a lot

so I have to enter gsap.registerPlugin (InertiaPlugin, Draggable, EasePack, MotionPathPlugin, MotionPathHelper, DrawSVGPlugin); in the window load? before document ready? or load it register it as js extra in wp with l enqueque ok i undestand..i ll try

My JS file that calls DrawSVGPlugin is here https://cartomanzia-tarocchi.com/wp-content/plugins/giochi-carte/public/js/tarocchi-zingara-build.js

look here https://cartomanzia-tarocchi.com/tarocchi-gratis/

it is the only file that gives me problems. I'm working in local machine .... do you have any other repository where I can download the file so I can understand if I have a corrupt version? I emphasize that the file comes from the official zip that I downloaded under the reserved area

hi i have this code and in folder i public last version gsap bonus file but plugin DrawSVGPlugin.min wasn t load... what s wrong ? corrupted file ? $(document).ready(function () { gsap.registerPlugin(InertiaPlugin, Draggable, EasePack, MotionPathPlugin, MotionPathHelper, DrawSVGPlugin); }); tarocchi-zingara-build.js:12 Uncaught ReferenceError: DrawSVGPlugin is not defined at HTMLDocument.<anonymous> (tarocchi-zingara-build.js:12) at i (jquery.js?ver=1.12.4-wp:2) at Object.fireWith [as resolveWith] (jquery.js?ver=1.12.4-wp:2) at Function.ready (jquery.js?ver=1.12.4-wp:2) at HTMLDocument.J (jquery.js?ver=1.12.4-wp:2)

exactly thanks

hi all, how can i read current stagger object property ? i have this function but not working

you are great !!! thanks

work fine now thanks

If you replace Shadow function with static value the behaviour Is the same...

Sorry but I noticed another oddity. I added the parameter boxShadow in the last animation but in the transition between the first and the last animation the shadow is lost for a moment ... this I'm sure in gsap 2 it didn't happen to me: D .to(chi, { duration: 1, x: larghezza_gioco / 2, boxShadow: function (index) { let ombra = '' - (5 + ((index + 1) * 10)) + 'px ' + (3 - ((index) * 3)) + 'px ' + (-4 + ((index + 1) * 10)) + 'px ' + (3 - ((index + 1) * 5)) + 'px rgba(0,0,0,' + (0.8 - ((index) * 0.1)) + ')'; return ombra }, ease: Power4.easeIn }, "-=1.8") Here is the link to codepen: https://codepen.io/Ninmorfeo/pen/MWYKrEK

ok thanks you right

can I solve if I use 2 separate timeline? like this function intro() { var tl = gsap.timeline(); //...add animations here... return tl; } function middle() { var tl = gsap.timeline(); //...add animations here... return tl; } // stitch them together in a master timeline... var master = gsap.timeline(); master.add(intro()) .add(conclusion(), "-=2") //overlap 2 seconds or is the same result ?

yes, but with 1.8 value the last animation starts when the penultimate animation is finished, while I would like it to start first. In the middle of the penultimate stagger for example. It must be said, however, that in gsap 2 this 'problem' did not exist.

I would like the last animation to start before the penultimate one is completed, for a more choreographic movement. More or less the way it is now but with all the squares going to the center.

Hi, in gsap 2 when i concatenate 2 animation and want the second start 2 second before the first one is completed i used this code: .to(chi, 1, { x: larghezza_gioco/2, ease: Power4.easeIn }, "-=2.5") and work nice. Now i try to convert prev code to this one: .to(chi, { duration: 1, x: larghezza_gioco / 2, ease: Power4.easeIn }, "-=2.5") but something strange happen. As you can see from codepen exemple, last timeline animation does not let the previous animation end and the last 2 square dont go to the center. Which didn't happen in gsap 2 even if the animations overlapped.