Search the Community

Hello, I came around a strange behavior when integrating GSAP/Timeline with VueJS. Needed to grab a reference to the timeline to be able to reverse play it later (and shallow watch for changes), used Vue's data to store the instance. This of course makes Vue add the reactivity to the object. It was working without any issues, now I found this strange behaviour. Not sure if it's some kind of obscure issue (with GSAP or VueJS) or it's just that generally GSAP objects (instances) shouldn't be added to Vue's data object? The codepen shows the issue (and "workarounds"), in short, adding a new TimelineMax to Vue's data while a Tween is progressing makes a TimelineMax.fromTo behave something like a "to" only (startAt value is used for the final state). The same setup when the TimelineMax object is first assigned to Vue's data before or after the Tween makes everything work as expected. I sort of worked around the issue for now, wondering though where the core issue is? Thanks! Petr

Hey there! Is there a possibility to not animate an element when it is set on display none by CSS? My current project is based on Vue.js. So I don't have that window object on mounted to detect the viewport size. So I thought it might be a nice workaround to let the animation start only if the target element is set on display block. Or is the only solution another Vue plugin to get the viewport width? Thanks in advance Kerstin

GS Community, I am in the process of rebuilding a GSAP website into a Vue.js project. I am in the very early stages of learning Vue, here is a good, free, video series and here is a very good (but it cost 10 dollars) Udemy course. My hope for this thread is to build out a full GSAP & Vue App. I will break out each component as I go and place it in a codepen (I have quite a few things done already, it will take me some time to go back and break things out). This will be a work in progress and the codepens will be updated in phases: Phase 1: will be to get just get things wired the Vue way. Phase 2: will be to use GSAP for the animations and transitions etc. Phase 3: Build everything as dynamic/reusable components. If all goes well this will turn into a Vue/GSAP component library of sorts for everyone to reference. Blake, one of the GreenSock Moderators, has graciously offered to help guide me (Thank you Blake). Goals for the thread/project: Navigation Button Component Section Content Component Section Hero Image Component Section Thumbnail/Modal Button Component Modal Component Password Modal Component Vertical Slideshow Component (I will also to help others build out a Horizontal Version). Slide-up Tab Component Radial Button/Checkbox Form Filtering based on a sector/classname (with persistence via local storage or a Vue method, if it exists - learning as I go ) All of the above is built in a non-Vue way here http://hainis.net/dev/ Note: that only the print/advil, print/amex, print/bayer slideshow content is sorted, all the other thumbnails will load a blank modal. This site has performance issues and at times the javascript, loaded via a Djax call, for the thumbnail buttons to launch the slideshow content is not binding properly. These issues and some prodding by Blake have made me venture down the Vue.js path. Side note: I'm learning, not there yet, to do things a DRY way; hopefully under Blake's guidance I will finally get this under control and tighten up the spaghetti code that I currently have. Okay, so that's the setup. Next post will be some useful links and a current state/NOT simplified codepen of the current Vue app.

Hoping someone can help me figure this out. I am rotating a fontawesome icon with TimelineLite. It works when I grab the element using $refs, but not when I use document.getElementById. What is interesting is that if I console.log the element selected by the two different methods, I get slightly different results: console.log(this.$refs[this.collapseId]); <svg data-v-56894cab="" aria-hidden="true" data-prefix="fas" data-icon="angle-down" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" id="section-arrow" class="svg-inline--fa fa-angle-down fa-w-10"><path data-v-56894cab="" fill="currentColor" d="M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z" class=""></path></svg> console.log(document.getElementById("section-arrow")); <svg data-v-56894cab="" aria-hidden="true" data-prefix="fas" data-icon="angle-down" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" id="section-arrow" class="svg-inline--fa fa-angle-down fa-w-10" style="transform: matrix(-1, 0, 0, -1, 0, 0);"><path data-v-56894cab="" fill="currentColor" d="M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z" class=""></path></svg> The problem is that I need to trigger animation of the same element by click handlers in two different components. The $refs selector works within the component where the target actually resides, but I have to use getElementById in the other component because one component cannot access the $refs of another. Anyone addressed this problem before? The Greensock docs suggest that you can use getElementById, but it is not working for me. Maybe it's a vue thing?

Hello all !! Im new on the forum, so nice to meet you all So, here is my problem: I purchased the club greensock license in order to get thoses nice features but i can't get it to work with Vue and Webpack (webpack template + vue-cli). But since im using the enhanced version of the framework, im not getting files from NPM anymore, i got to use the source from the zip archive. So im a big noob with webpack, i discover webpack with version 1.x, i was horrify, since V2 seems more friendly user, i deciding to use it with Vue, and since we have Vu-cli, well you have to go with Webpack if your using Vue Anyway, i don't know how to make it work. If somone got an idea for the configuration, the way to `import` Plugins ? I'd like to use MorphSVGPLugin, but i just don't know how to get it. I tried everything... I also created a local npm package... But it didn't worked... I need to got my website online on Thursday, i really need help ^^ PS: with the free license, i can get things running because i'm using it like this: import { TweenLite, ... } from 'gsap' How can i do this for the MorphSVGPlugin ? Thx for future help, and thx for GSAP, very nice framwork

I'm learning both vue.js and greensock and looking to understand how to use these two wonderful tools in tandem. The position: as I understand it, the point of using vue.js is that you don't need to manually update the dom. Instead, you bind data properties and vue then handles dom updates for you. All you do is change the data property. I have explored using TweenLite and passing in as the first argument something from the reactive data properties of a vue component, e.g. <template> <svg width="20rem" height="20rem" viewBox="0 0 100 100"> <rect :x="rect1.x" :y="rect1.y" :width="rect1.w" :height="rect1.h" :fill="rect1.f" /> <circle id="circle1" class="fill-dark-blue" cx="60" cy="60" r="10" /> </svg> </template> <script> export default { data() { return { // below are not dom elements, but are bound to dom elements by vue rect1: { x: 14.696, y: 13.414, w: 47.574, h: 30.602, f: '#ebebeb' }, // ... }, }, // } // e.g. in mounted(): TweenLite.to(this.rect1, 1.0, { w: 10, h: 50, f: '#ffd700', ease:Power4.easeOut }); What this is doing is tweening the data property which vue then reactively updates each time the data property is changed by TweenLite. i.e. we're tweening a vue data property, which is then reactively updated on each change. It all works fine, which is very cool. However, I cannot use, e.g. { className: 'light-yellow' } in the TweenLite vars, the reason being that to accomplish that animation, gsap will attempt to do it by first sniffing the css properties, then adding a style tag (as seen in action on the excellent intro to greensock short video on this site). That does not work because (my guess) the selector passed to gsap is not actually a dom selector but the vue data property. Hence, gsap doesn't seem to be able to get the dom hook so can't apply the style tag. At least, that's my diagnosis of why it is not working. In contrast, I can get the className animation working by doing this: TweenLite.to('#circle1', 1.0, { className: 'fill-light-blue' }); What the above is doing is going into the dom directly via an id tag and so bypassing vue's data binding. The problem is that in this case, if I have a complex svg, I can no longer benefit from vue's ability to bind into anywhere in the dom simply by updating a data property. I'll have to get into dom navigation. This seems wrong. What does all this mean? Does it mean quite simply that if I want to tween vue data properties (for the benefit of not having to navigate the dom) that the feature set I am going to have available to me from gsap is going to be necessarily limited? I'm not entirely sure at this point how much of TweenLite & Max's power is going to be curtailed by this pattern, as I'm still learning. At this point I really want to grab a couple of good patterns for vue & gsap and get plenty of practice. Just need to settle on a limited set of patterns to practice with. The goal I have in mind here is, say, making a fairly complex svg and animating its component parts with greensock, via vue. Am I doing this right ? Thank you very much for discussion.

Hi, I'm using TweenMax inside a Vue.js SFC - https://vuejs.org/v2/guide/single-file-components.html It's a Spinner component I re-use throughout our app. As soon as I visit a page using vuejs router - https://router.vuejs.org/ that has a spinner component in it and then go to another page, on return to the previous page, the animation no longer works and I get tons of errors that increment really fast in the console. It may be related to this if vue.js is hiding it for reuse - I'm not sure if I should be troubleshooting in this forum or vue.js Thanks, Gavin.

Hello GSAP'ers I'm using Vue-Cli / Webpack template and I already managed to import ScrollMagic, but when running TimelineMax with setTween I get this error: "(ScrollMagic.Scene) -> ERROR calling setTween() due to missing Plugin 'animation.gsap'. Please make sure to include plugins/animation.gsap.js" My webpack.base.config.js is configured like this: var $ = require("jquery"); var ScrollMagic = require("scrollmagic"); var ScrollGsap = require('scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap'); var gsap = require("gsap"); module.exports = { ... resolve: { extensions: ['.js', '.vue', '.json'], alias: { "TweenLite": Path.resolve('node_modules', 'gsap/src/uncompressed/TweenLite.js'), "TweenMax": Path.resolve('node_modules', 'gsap/src/uncompressed/TweenMax.js'), "TimelineLite": Path.resolve('node_modules', 'gsap/src/uncompressed/TimelineLite.js'), "TimelineMax": Path.resolve('node_modules', 'gsap/src/uncompressed/TimelineMax.js'), "ScrollMagic": Path.resolve('node_modules', 'scrollmagic/scrollmagic/uncompressed/ScrollMagic.js'), "animation.gsap": Path.resolve('node_modules', 'scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js'), "debug.addIndicators": Path.resolve('node_modules', 'scrollmagic/scrollmagic/uncompressed/plugins/debug.addIndicators.js') } And my Component.vue is like this: <script> import { TweenMax, TimelineMax } from 'gsap' import $ from 'jquery' import ScrollMagic from 'scrollmagic' import gsap from 'scrollmagic' export default { mounted () { TweenMax.from('#red', 5, {width: 0}); const tlVueGsap = new TimelineMax() .from('#blue', 5, {width: 0}) .to('#blue', 5, {x: 400}) const controller = new ScrollMagic.Controller(); const scene = new ScrollMagic.Scene({ triggerElement: "#red" }) .setTween(tlVueGsap) .addTo(controller); } //Close Mounted } //Close Export Defautl </script> ScrollMagic is working, just the gsap.animation plugin that is not being imported Any idea how to solve it? Link of Github Project: https://github.com/Efetivos/vue_init/blob/master/src/components/GsapTest.vue Thanks Folk

Hey folks, I'm trying to setup GSDevTools on a Vuejs using Npm and Webpack. All the plugins are in the folder: /node_modules/gsap I'm using Vuejs and my component looks like: <template lang="html"> <div> <div id="animate" @click="animateIt"> content </div> </div> </template> <script> import {TimelineMax, CSSPlugin, Sine, GSDevTools} from 'gsap' export default { name: 'ComponentName', data: () => ({ var_1: 'dummy' }), methods: { animateIt: function() { var t1 = new TimelineMax() t1.to('#animate', .2, { opacity: 1, ease: Sine.easeInOut }) .to('#animate', .2, { css: { color: red, }, ease: Sine.easeIn }) } }, mounted() { GSDevTools.create() } } </script> For others plugins they work as expected so i can import them when needed using for example: import {TimelineMax, CSSPlugin, Sine, Power4} from 'gsap' But if I add the GSDevTools as for the others this doesn't work. If I import the plugin with: import {GSDevTools} from 'gsap' // or import GSDevTools from 'gsap/GSDevTools' // or import GSDevTools from '../../../node_modules/gsap/GSDevTools' // or import * as GSDevTools from '../../../node_modules/gsap/GSDevTools' // or var GSDevTools = require ('gsap/GSDevTools') // or var GSDevTools = require ('../../../node_modules/gsap/GSDevTools') I got this error: I'm stucked, please Help!!! Thanks

Hi, all. When I try to import the DrawSVGPlugin to a NuxtJS project, I get the following error: TypeError: Cannot read property 'defaultView' of undefined at /Users/mdf/Sites/nuxtproject/node_modules/gsap/DrawSVGPlugin.js:19:27 at Object.<anonymous> (/Users/mdf/Sites/nuxtproject/node_modules/gsap/DrawSVGPlugin.js:202:54) at Module._compile (module.js:569:30) at Object.Module._extensions..js (module.js:580:10) at Module.load (module.js:503:32) at tryModuleLoad (module.js:466:12) at Function.Module._load (module.js:458:3) at Module.require (module.js:513:17) at require (internal/module.js:11:18) at r (/Users/mdf/Sites/nuxtproject/node_modules/vue-server-renderer/build.js:5812:16) at Object.<anonymous> (webpack:/external "gsap/DrawSVGPlugin":1:0) at __webpack_require__ (webpack:/webpack/bootstrap 8aad739dc52752aa5015:25:0) at Object.70 (2.server-bundle.js:123:77) at __webpack_require__ (webpack:/webpack/bootstrap 8aad739dc52752aa5015:25:0) at Object.61 (pages/index.vue:7:0) at __webpack_require__ (webpack:/webpack/bootstrap 8aad739dc52752aa5015:25:0) The error is related to the call to `_doc.defaultView` and only happens when the page is server rendered, not when it is client rendered. I'm not sure if there is an issue with the vue-server-renderer package or if I'm not importing the plugin correctly. I've tried importing the plugin from the assets folder import TweenLite from 'gsap'; import '~/assets/DrawSVGPlugin'; as well as copying it into the gsap folder in node_modules import TweenLite from 'gsap'; import 'gsap/DrawSVGPlugin'; Both produce the same error. The error is also not Nuxt-specific but happens whenever Vue server-side rendering is used. I put together a bare-bones example to illustrate the problem here https://github.com/michaeldfoley/vue-ssr-drawsvgplugin-error. Any help would be appreciated.