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.

https://codepen.io/fillthegap/pen/VwmZedg not that easy! i made this pen, very simple, you move the animal to the circle and it disappears. if i use the same component again, the animal disappears when the pen is started, and the svg image tag shows an also transform property. unfortunately this does not work in the pen, not even if I duplicate the component.

When a component is loaded a second time, a transform is added. When I put 2 components with a simple drag and drop twice on the page, the second componennt adds some tranformationsions to the svg element which I add to the draggable. image elment off the first component: <image data-v-bc36c152="" xlink:href="/img/qualle.87fd74d4.svg" x="50" y="500" height="100px" width="100px" class="icon e0" data-svg-origin="50 500" style="transform-origin: 0px 0px; touch-action: none; cursor: grab; user-select: none;"></image> seconds element: transform added, image not visible: <image data-v-bc36c152="" xlink:href="/img/qualle.87fd74d4.svg" x="50" y="500" height="100px" width="100px" class="icon e0" data-svg-origin="50 500" transform="matrix(1,0,0,1,0,-728)" style="transform-origin: 0px 0px; touch-action: none; cursor: grab; user-select: none;"></image> the vuejs component, the interesst part is where the draggable is added. I think I catched the right svg element (query on the refs name) <template> <div class="stammbaum-container" :ref="'' + classname"> <svg version="1.1" class="svg-container" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 800 600" style="enable-background:new 0 0 800 600;" xml:space="preserve"> <text x="45" y="270" class="t0 small" text-anchor="middle" > ABCDEF </text> <g stroke="f1f1f1" fill="orange" stroke-width="0.5" id="targetcircle"> <circle cx="45" cy="220" r="40" class="c0" /> </g> <image xlink:href="../assets/stammbaum-icon/qualle.svg" x="50" y="500" height="100px" width="100px" class="icon e0"></image> </svg> </div> </template> <script> import { gsap } from "gsap"; import { Draggable } from "gsap/Draggable"; export default { name: 'Stammbaum', data: function () { return { counter: 0, x: 0, y: 0, endScale: 0.6, } }, props: { msg: String, classname: String, }, created() { }, methods: { }, mounted() { gsap.registerPlugin(Draggable); var that = this; console.log("mounted start", this.classname, this.$refs); // console.log(this.$refs[this.classname]); var e0 = this.$refs[this.classname].querySelector(".e0") console.log("e0",e0); var c0 = this.$refs[this.classname].querySelector(".c0"); // console.log("c0",c0); var t0 = this.$refs[this.classname].querySelector(".t0"); console.log("t0",t0); console.log("first elements referenced"); Draggable.create(e0, { bounds:"svg", onDragStart: function(){ console.log("onDragStart"); gsap.to(e0, {duration: 0.4, scale: 1.4, transformOrigin: "center" }); // console.log(this.target); }, onDragEnd: function() { console.log("onDragEnd"); if (!(this.hitTest(c0) ) ) { gsap.to(e0, {duration: 0.4, x: 0, y: 0, scale: 1.0}) } }, onDrag: function() { if (this.hitTest(c0)) { console.log("hittest 0"); var target1x = c0.getBBox().x var target1y = c0.getBBox().y var star1x = e0.getBBox().x var star1y = e0.getBBox().y // console.log("1"); gsap.to(e0, {duration: 0.4, x:target1x-star1x, y:target1y-star1y, scale: that.endScale }) // console.log("2"); gsap.to(c0, {duration: 0.4, opacity: 0.0}); // console.log("3"); gsap.to(t0, {duration: 0.4, opacity: 1.0}); Draggable.get(e0).disable(); } } }); }, } </script> <style scoped> .stammbaum-container{ left: 0px; } .svg-container { display:block; position:relative; width:800px; background:#f8f7f7; margin:20px auto; } </style>

ok, means I send via prop a refname to the component, and then I use this refname to select my classes Ok, I can select with classic queryselectors my element and then use this in the timeline?

ok, I switch to Timeline, and now I can trigger the morphs and fades easy with fromto() great! but how can I capsulate the timelines or elements in one vuejs component, when I use the same component a few times on the page? when I select an ID or class, it is multiple times inside the dom, how can I prevent this? How can I select only childrens of the component? this.tl.to("#outline1", {morphSVG:"#outline2", duration: 1.5, delay: 0.0, onComplete: this.animEnd}, 0.5 );

i'm experimenting with the morph plugin. if I want to start the morph within a vuejs component by clicking on the svg, it works. with another click I would like to morph back, but I get my console output, but I don't see anything. on the acg I have @click="doAnim" in the mounted I hide the unused paths gsap.set("#fill2", {visibility:"hidden"}) gsap.set("#outline2", {visibility:"hidden"}) onlike clickable when no animation runs doAnim: function(){ console.log("doAnim") if (this.animState == 1){ this.anim2(); } else if (this.animState == 2){ this.anim1(); } }, and the functions to start the morph, I already tried to switch the visibility of the paths. Is there an morph object I have to put in an variable and operate on this. anim1: function(){ console.log("anim1") this.animState= 0; gsap.to("#outline1", {morphSVG:"#outline2", duration: 1.5, delay: 0.5, onComplete: this.anim1End}); gsap.to("#fill1", {morphSVG:"#fill2", duration: 1.5, delay: 0.5,}); }, anim2: function(){ console.log("anim2") this.animState= 0; gsap.to("#outline2", {morphSVG:"#outline1", duration: 1.5, delay: 0.5, onComplete: this.anim2End}); gsap.to("#fill2", {morphSVG:"#fill1", duration: 1.5, delay: 0.5, yoyo:true}); },

Hi, I tried to morph 2 simple path, but on the created method I can't find the #fill1 or #outline1 id. In chrome inspector I can see the tag, but the queryselector didn't work. why? EDIT: found the error, I switched the mounted and created method. <template> <div> <svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 841.9 1190.6" style="enable-background:new 0 0 841.9 1190.6;" xml:space="preserve"> <svg:style type="text/css"> .st0{fill:#DAE4E2;} .st1{fill:none;stroke:#3D3E3E;stroke-width:3;} .st2{fill:#3D3E3E;} </svg:style> <g id="base-1"> <path id="fill1" class="st0" d="M69.2,145.1c0,0,3.5-3.2,7.9-1.8c5.6,1.9,8.6,0.7,8.6,0.7s6.8,15.6,6.8,30.4 c0,14.8-6.6,37.4,21.6,37.9c28.2,0.4,33.2,1.5,50.2,4.4s33.2,7.7,48-8.4c14.2-15.5,16-18.1,15.9-26.2c0-0.3,0-0.6,0-0.9 c-0.2-8.8,3.1-7.1-2.6-11.7c0,0,3.1-2,3.3-3.7c0.2-1.8-1.1-7.3-5.5-10.1c0,0,1.5-6.2-4.6-10.4c-6.2-4.2-22.2-10.8-29.1-22.5 c0,0-0.9-3.5-9.7-7.9c-8.8-4.4-11.9-13-14.5-26c-2.6-13-5.5-37.7-14.1-38.8s-11.2,12.3-16.3,5.9c-5.1-6.4-26.4-31.7-48-31.7 s-48.4,17.2-61.7,33c0,0-11,10.8-6.8,21.6c0,0,2.9,5.1,3.1,10.8s-0.2,24.2,15,37.2s14.4,19.5,22,20.5 C66.9,148.6,69.2,145.1,69.2,145.1"/> <path id="outline1" class="st1" d="M69.2,145.1c0,0,3.5-3.2,7.9-1.8c5.6,1.9,8.6,0.7,8.6,0.7s6.8,15.6,6.8,30.4 c0,14.8-6.6,37.4,21.6,37.9c28.2,0.4,33.2,1.5,50.2,4.4s33.2,7.7,48-8.4c14.2-15.5,16-18.1,15.9-26.2c0-0.3,0-0.6,0-0.9 c-0.2-8.8,3.1-7.1-2.6-11.7c0,0,3.1-2,3.3-3.7c0.2-1.8-1.1-7.3-5.5-10.1c0,0,1.5-6.2-4.6-10.4c-6.2-4.2-22.2-10.8-29.1-22.5 c0,0-2.3-4.3-9.7-7.9c-8.8-4.4-11.9-13-14.5-26c-2.6-13-5.5-37.7-14.1-38.8s-11.2,12.3-16.3,5.9c-5.1-6.4-26.4-31.7-48-31.7 s-48.4,17.2-61.7,33c0,0-11,10.8-6.8,21.6c0,0,2.9,5.1,3.1,10.8s-0.2,24.2,15,37.2s14.4,19.5,22,20.5 C66.9,148.6,69.2,145.1,69.2,145.1z"/> </g> <g id="base-2"> <path id="fill2" class="st0" d="M205.5,188.2c0,0,1.8,6.2-2,10.4c0,0-12.3,29.3-25.3,30.6s-26.9-11.9-55.7-22.7 s-22.5-36.6-22.5-36.6s4.4-15.6,1.1-36.8c0,0-0.4-2-2-1.8s-0.2,3.3-4.4,3.5s-2.6-2.9-7.1-3.3c-4.4-0.4-6.6,4-9,5.1 c-2.4,1.1-6.8,0.9-9-2.6c0,0-6,2.2-10.1-2.2s-7.5-0.9-14.1-9c-6.6-8.1-10-15.4-19.8-24c0,0-4.5-2.6-2.6-6.7 c2.1-4.7,5.5-12.7,6.8-18.2c1.3-5.5,22-50.9,65.8-50.9s70.5,18.9,84.1,47.3c0,0,5.7-0.1,7.1,4.4c1.3,4.5,1.1,9-2,14.3 s-11,17.2-6.8,24s5.5,8.1,5.9,13c0.4,4.8,4.8,18.3,11.9,26.2c7.1,7.9,10.8,16.3,10.8,16.3s3.1,7.3,0.1,8.3 C206.8,176.9,209.3,186,205.5,188.2"/> <path id="outline2" class="st1" d="M205.5,188.2c0,0,1.8,6.2-2,10.4c0,0-12.3,29.3-25.3,30.6s-26.9-11.9-55.7-22.7 s-22.5-36.6-22.5-36.6s4.4-15.6,1.1-36.8c0,0-0.4-2-2-1.8s-0.2,3.3-4.4,3.5s-2.6-2.9-7.1-3.3c-4.4-0.4-6.6,4-9,5.1 c-2.4,1.1-6.8,0.9-9-2.6c0,0-6,2.2-10.1-2.2s-7.5-0.9-14.1-9c-6.6-8.1-10-15.4-19.8-24c0,0-4.5-2.6-2.6-6.7 c2.1-4.7,5.5-12.7,6.8-18.2c1.3-5.5,22-50.9,65.8-50.9s70.5,18.9,84.1,47.3c0,0,5.7-0.1,7.1,4.4c1.3,4.5,1.1,9-2,14.3 s-11,17.2-6.8,24s5.5,8.1,5.9,13c0.4,4.8,4.8,18.3,11.9,26.2c7.1,7.9,10.8,16.3,10.8,16.3s2.1,4.5,0.1,8.3 C206.8,176.9,210.2,182.2,205.5,188.2z"/> </g> </svg> </div> </template> <script> import { gsap } from "gsap"; import MorphSVGPlugin from "gsap/MorphSVGPlugin"; export default { name: 'SchaedelMorph', data: function () { return { // counter: 0, // x: 0, // y: 0, // text1: "hallo", // endScale: 0.6, // language_de: ["Tiere","Wirbeltiere","Säugetiere","Primaten","Menschenaffen","Menschen"], // language_en: ["Tiere","Wirbeltiere","Säugetiere","Primaten","Große Menschenaffen","Menschen"], } }, props: { msg: String }, mounted() { console.log("mounted"); gsap.registerPlugin(MorphSVGPlugin); gsap.set("#base-2", {visibility:"hidden"}) gsap.set("#zaehne-2", {visibility:"hidden"}) gsap.set("#blend-2", {visibility:"hidden"}) gsap.set("#zaehne-1", {visibility:"hidden"}) gsap.set("#blend-1", {visibility:"hidden"}) // gsap.set("base-2", {visibility:"hidden"}) }, created() { console.log("created"); if(document.querySelector("#outline1")) { console.log("found... "); gsap.to("#outline1", {morphSVG:"#outline2", duration: 2}); } // gsap.to("#fill1", {morphSVG:"#fill2", duration: 2}); } } </script> <style scoped> </style>

I have a simple set, a svg with some target circles and a few icosn to drag. <g stroke="f1f1f1" fill="orange" stroke-width="0.5" id="targetcircle"> <circle cx="45" cy="220" r="40" id="c0" /> <circle cx="135" cy="220" r="40" id="c1" /> <circle cx="225" cy="220" r="40" id="c2" /> <circle cx="315" cy="220" r="40" id="c3" /> <circle cx="415" cy="220" r="40" id="c4" /> <circle cx="605" cy="220" r="40" id="c5" /> </g> <image xlink:href="../assets/logo.png" x="0" y="0" height="50px" width="50px"></image> <image xlink:href="../assets/giraffe.svg" x="50" y="500" height="100px" width="100px" class="icon" id="e1"></image> <image xlink:href="../assets/giraffe.svg" x="150" y="500" height="100px" width="100px" class="icon" id="e2"></image> <image xlink:href="../assets/giraffe.svg" x="250" y="500" height="100px" width="100px" class="icon" id="e3"></image> <image xlink:href="../assets/giraffe.svg" x="350" y="500" height="100px" width="100px" class="icon" id="e4"></image> <image xlink:href="../assets/giraffe.svg" x="450" y="500" height="100px" width="100px" class="icon" id="e5"></image> insode a vuejs mounted method I add the drag&drop behaviour, like in the demo on this site. works great! Now I got problems to move the icon to the circles poition when the hittest is true. I am using the getBBo function, but it return NAN for cx and the cy values. why? is the image not an svg element? gsap.set('.icon', { x: 0, y: 0, rotation: 0, scale: 1.0, transformOrigin: "center" }); Draggable.create("#e1", { bounds:"svg", onPress: function(){ console.log(this.target); }, onDrag: function() { if (this.hitTest("#c1")) { const box1 = getBBox("#c1"); const box2 = getBBox("#e1"); console.log(box1, box2); const dx = box2.cx - box1.cx; const dy = box2.cy - box1.cy; console.log(dx, dy); gsap.to("#e1", {duration: 0.6, opacity:0.5, scale:.7, x: dx, y: dy}); Draggable.get("#e1").disable(); } } }); function getBBox(element, withoutTransforms, toElement) { var svg = element.ownerSVGElement; if (!svg) { return { x: 0, y: 0, width: 0, height: 0 }; } if (withoutTransforms) { return element.getBBox(); } var p = svg.createSVGPoint(); var r = element.getBBox(); var matrix = (toElement || svg).getScreenCTM().inverse().multiply(element.getScreenCTM()); p.x = r.x; p.y = r.y; var a = p.matrixTransform(matrix); p.x = r.x + r.width; p.y = r.y; var b = p.matrixTransform(matrix); p.x = r.x + r.width; p.y = r.y + r.height; var c = p.matrixTransform(matrix); p.x = r.x; p.y = r.y + r.height; var d = p.matrixTransform(matrix); var minX = Math.min(a.x, b.x, c.x, d.x); var maxX = Math.max(a.x, b.x, c.x, d.x); var minY = Math.min(a.y, b.y, c.y, d.y); var maxY = Math.max(a.y, b.y, c.y, d.y); var width = maxX - minX; var height = maxY - minY; return { x: minX, y: minY, width: width, height: height, cx: minX + width / 2, cy: minY + height / 2 }; }

I done a few things with gsap in vuejs to animate simple html or svg elements. Now I tried to make an drag an drop game based on this tutorial: when I use the import Draggable I got in the VSC console the fllowing message: "export 'Draggable' was not found in 'gsap' and I the browser console: [Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'create' of undefined" here's the code <script> import {gsap , Draggable} from 'gsap' export default { name: 'HelloWorld', props: { msg: String }, mounted() { Draggable.create(".icon", { bounds:"svg", onPress: function(){ console.log(this.target); }, onDrag: function() { if (this.hitTest("#bag")) { gsap.to(this.target, {duration: 0.6, opacity:0, scale:0, svgOrigin:"675 143"}); } } }); }, } </script> where's my fault?