mindthegap
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by mindthegap
-
-
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" });
-
1
-
-
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)
-
On 2/7/2022 at 1:29 PM, Cassie said:
Firstly I would advise against animating filters for performance reasons.
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.
-
1
-
-
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 animationsgsap.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.
-
15 hours ago, GreenSock said:
That's necessary in order to get the proper behavior. A bug in Chrome doesn't respect touch-action on SVG elements - it only works if we set it on the parent SVG.
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.
-
1
-
-
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?
-
27 minutes ago, Dipscom said:
Hello mindthegap,
This was definitely a bunch of little things that together culminated on the issue you are reporting.
First, is the fact that something in codepen is not right. It doesn't like the self-closing component you have: "<dragcomp [...] />" - I got it to work by changing it to being a normal open and close tag: "<dragcomp [...]></dragcomp>".
ok, I should see it.
27 minutes ago, Dipscom said:Then, in my broswer (Firefox) the image does not appear if I am inside CodePen's editor but it does if I am in the debug view - no codepen editor at all. Which means, there's something funky there. Probably a security or CORS issue with iFrames.
Then, and this was the biggest tripper I found, is the fact that you are setting the draggable bounds to be "svg". So, the second image is being constrained inside the first SVG because that's the first "svg" node GSAP finds. Join that the default behaviour of an SVG overflow property to be "hidden", your image cannot be seen but you can inspect it and see the bounding box being inside the first SVG. To solve this issue, you should add a $ref to the SVG itself and refer to that when instantiating Draggable.
thanks, that's the solution, I switched all selectors to ref id + basename of the component and it works great.
27 minutes ago, Dipscom said:You should also add specific $refs to the other elements you want to target directly instead of using query selectors, there isn't much of a benefit to doing the this.$ref[this.classname].querySelector('.class') if you can simply do this.$ref['someId' + this.classname]
I hope that helps.
-
See the Pen VwmZedg by fillthegap (@fillthegap) on CodePen
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>
-
1 hour ago, ZachSaucier said:
I would use a ref
ok, means I send via prop a refname to the component, and then I use this refname to select my classes
1 hour ago, ZachSaucier said:The only alternative is if you have some reference to a parent of your elements that you're wanting (like a DOM reference to the outermost element of your component) then you use .querySelector() on that DOM reference.
Ok, I can select with classic queryselectors my element and then use this in the timeline?
-
57 minutes ago, ZachSaucier said:
A few notes:
- I'd probably use a single timeline outside of your event listeners/callbacks and and use control methods inside of your callbacks (like .play() and .reverse()). This is one of the keys to animating efficiently (I highly recommend the whole article).
- You shouldn't have multiple elements with the same ID on your page. That's invalid. Instead you should use classes.
yes, that's right,
- To have multiple instances of this on your page you should make use of Vue's refs.
I can use multiple components, the problem is that with this.tl.to(".outline1", greensocket selects all path with the call "outline1" how can I select only the class in the component.
-
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?
Attraction between Elements
in GSAP
Posted
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?