mindthegap

Hello, I'm probably wrong here, but maybe someone can give me a tip. I want to connect a group of divs like with rubber bands, say 5-7 images are connected in a group. if I move one of the images, the other images should move as well. Can I do this with gsap or is there a physics library that I can use to do this?

sorry, ficed it, a wired reactive vue effect

I moving an element to definied postion on the the screen, at one task I rotate it to the top, works great, but the seconds time the rotation is done out directly / hard. why? the other property tween perfect. gsap.killTweensOf("#flediflieg"); gsap.to(flediflieg, {duration: 1.5, rotation: -170, width: flediContainer[0].offsetWidth *0.35, height: flediContainer[0].offsetWidth *0.35, x: flediContainer[0].offsetWidth *0.7 , y: flediContainer[0].offsetHeight * -0.08, delay: 0.2, ease:"power2.inout" });

I want to create a frame player for canvas graphics in vuejs. the mechanics work so far. there is a "in", "loop" and "out" sequence that starts the respective animation sequence via watch properties. this.animation = gsap.timeline({ repeat: 0, paused: false, onUpdate: this.drawSprite }).to(this.sprite, 1, { frame: 0, roundProps: "frame", }); now I have only one problem to somehow activate the loop. I thought I could give {repeat:1} as an object, but nothing happens. or to change this.animation.repeat = 1; if ( (this.type == "in") ){ this.animation.fromTo(this.sprite, 1.0, { frame:0, roundProps: "frame" }, { frame:29, roundProps: "frame" }); } else if ( this.type == "loop" ){ this.animation.fromTo(this.sprite, 1.0, { frame:30, roundProps: "frame" }, { frame:59, roundProps: "frame" }, {repeat: -1}); } else if ( this.type == "out" ){ this.animation.fromTo(this.sprite, 1.0, { frame:this.sprite.frame, roundProps: "frame" }, { frame:89, roundProps: "frame" }); }

ok, what does the [0] ?

not working, Uncaught (in promise) TypeError: this.draggable.kill is not a function

hi, I create a few draggable elements in the mounted script of a vue component gsap.registerPlugin(Draggable); Draggable.create(dragTicket1, {... I thought I can remove the Draggable with Draggable.kill() inside the beforeUnmount hook of the component, but I got an error. Ok, is it necessary to remove the Draggables? Or is this handled inside the gsap? Uncaught (in promise) TypeError: gsap_Draggable__WEBPACK_IMPORTED_MODULE_11__.Draggable.kill is not a function at Proxy.beforeUnmount (VueGame.vue?b4b8:2675:1)

performance isn't an issue, installation setup with fine hardware. ok, I'll try to use the current rotation to change the shadow.

I animate a svg element, movement and rotation. how can i adjust the shadow to the rotation. it is currently controlled by css, which is of course static at first, how can I set the style dynamically with gsap. this.tween = gsap.to(element, this.random(1.5, 2.5), {x: newPoint[0], y: newPoint[1], rotation: newRotation , delay: this.random(4, 10), ease:"power2.inout", onComplete:this.randomMovement, onCompleteParams:[element, arrayPos]}); <g id="timeout-stoerer" transform="translate(960 -540) rotate(0)" class="svg-dark-shadow"> <path ... </g> .svg-dark-shadow { filter: drop-shadow(12px 12px 6px orange); // filter: drop-shadow(0px 3px 3px rgb(221, 8, 8)); }

thanks, I tested it directly after the start of the loading, now it plays fine. thanks.

hi, after using the GSAP Plugin over a year, <g id="lotti-player-coach" data-v-138106d0=""> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200" height="200" preserveAspectRatio="xMidYMid meet" style="width:100%;height:100%;transform:translate3d(0px, 0px, 0px);content-visibility:visible"> <defs> <clipPath id="__lottie_element_221"> <rect width="200" height="200" x="0" y="0"/> </clipPath> <clipPath id="__lottie_element_226"> <path d="M0,0 L200,0 L200,200 L0,200z"/> </clipPath> </defs> <g clip-path="url(#__lottie_element_221)"> <g class="transport" clip-path="url(#__lottie_element_226)" transform="matrix(1,0,0,1,0,0)" opacity="1" style="display:block"> <g transform="matrix(1,0,0,1,80.08300018310547,115.66331481933594)" opacity="1" style="display:block"> <g opacity="1" transform="matrix(1,0,0,1,3.7950000762939453,13.991999626159668)"> <path fill="rgb(140,104,79)" fill-opacity="1" d=" M1.2960000038146973,-10.196000099182129 C1.2960000038146973,-10.196000099182129 1.2960000038146973,10.196000099182129 1.2960000038146973,10.196000099182129 C1.2960000038146973,10.911999702453613 0.7149999737739563,11.491999626159668 -0.0010000000474974513,11.491999626159668 C-0.7160000205039978,11.491999626159668 -1.2960000038146973,10.911999702453613 -1.2960000038146973,10.196000099182129 C-1.2960000038146973,10.196000099182129 -1.2960000038146973,-10.196000099182129 -1.2960000038146973,-10.196000099182129 C-1.2960000038146973,-10.911999702453613 -0.7160000205039978,-11.491999626159668 -0.0010000000474974513,-11.491999626159668 C0.7149999737739563,-11.491999626159668 1.2960000038146973,-10.911999702453613 1.2960000038146973,-10.196000099182129z"/> After I used the GSAP plugin with a lot of friends for a year and actually never had any major problems, I now have a little problem. ok, i load different lottie files into an existing SVG element. works so far. here's the svg code of inside the parent svg <g id="lotti-target-coach"></g> then I load this.moveAnimations.push( lottieWeb.loadAnimation({ container: document.getElementById('lotti-player-coach'), renderer: 'svg', loop: true, autoplay: true, path: './static/meeples/meeple_player_coach.json' }) ) for some i would like to transform individual elements. unfortunately I can't get access to the elements in the injected svg. How can I, for example, influence the rotation of the element with the transport class? I tried different methods to access the .transport element but it didn't work. let q = gsap.utils.selector("#lotti-player-coach"); // or use selector text like ".class" console.log(q); // let boxes = q(".box"); // finds only elements with the class "box" that are INSIDE myElement // or plug directly into animations gsap.to(q(".transport"), {x: 100}); gsap.set("#lotti-player-coach .transport", {rotate: "30deg", x: 300}); gsap.set(".transport", {transform:"rotate(45deg)"}); these are my error: GSAP target not found. GSAP target #lotti-player-coach .transport not found. GSAP target .transport not found. when I try to rotate the #lotti-target-couch with gsap.set("#lotti-player-coach", {rotate: "30deg", x: 1000}); everything ist fine. I think the problem ist the injected part?!? it works, how can I manipulate the child with a class.

I have no problem withe the resent chrome build 88, I can use the draggable plugin with elements in the svg, an touch the "non touchable" svg area to scroll the page.

I set the style="" after the svg element is mounted. everything is fine.

I created an svg element with a little drag & drop game, now i have integrated it on a scrollable page and discovered that within the svg element there is a touch-action: none style. not in the source code!!! where does it come from?

ok, I should see it. thanks, that's the solution, I switched all selectors to ref id + basename of the component and it works great.