Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


  • Posts

  • Joined

  • Last visited

About mindthegap

mindthegap's Achievements

  1. not working, Uncaught (in promise) TypeError: this.draggable.kill is not a function
  2. 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)
  3. performance isn't an issue, installation setup with fine hardware. ok, I'll try to use the current rotation to change the shadow.
  4. 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)); }
  5. thanks, I tested it directly after the start of the loading, now it plays fine. thanks.
  6. 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.
  7. 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.
  8. I set the style="" after the svg element is mounted. everything is fine.
  9. 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?
  10. 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.
  11. 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.
  12. 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>
  13. 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?