Share Posted February 19, 2019 I am trying to follow the examples as mentioned in this article: https://blog.usejournal.com/vue-js-gsap-animations-26fc6b1c3c5a But I am having issues with it kindly help. export default { mounted() { const { lawn2019 } = this.$refs // eslint-disable-next-line const timeline2 = new TweenMax() timeline2.to(lawn2019, 3, {scrambleText: "anytext"}) }, Link to comment Share on other sites More sharing options...
Share Posted February 19, 2019 Hi and welcome to the GreenSock forums. Unfortunately there is not much we can do with that code snippet you posted. Please create a reduced sample illustrating the issue you're having in codepen: Also you can use codesandbox: https://codesandbox.io Here you can get the scramble text plugin available to work with sandboxes: See the Pen OPqpRJ by GreenSock (@GreenSock) on CodePen Happy tweening!! 2 Link to comment Share on other sites More sharing options...
Share Posted February 19, 2019 Hi, I still have no idea what you're trying to achieve and what your issue is, but I updated a previous sample of a basic GSAP/VueJS app to use the Scramble Text plugin: https://codesandbox.io/s/l261n378km Feel free to fork it in order to use your own code. Happy Tweening!! 3 Link to comment Share on other sites More sharing options...
Share Posted February 19, 2019 Soooooo, Rodrigo's slowly moving away from the grubby framework into the light... Yes? You better watch where you going, else you step on unfamiliar turfs. Yah? 1 3 Link to comment Share on other sites More sharing options...
Share Posted February 19, 2019 Just helping a fellow GSAP user, besides this forums are open territory, right? If you think otherwise, bring it on buster!!! 1 3 Link to comment Share on other sites More sharing options...
Share Posted February 19, 2019 I might create a giphy account just to be able to rebuke those gif attacks of yours. The truth is, you are slowly leaving the dark side. You will embrace the truth! You will LEARN AND BE ONE WITH THE UNIVERSE! Renounce the grubby framework. Cleanse yourself. Be with us! :D 3 Link to comment Share on other sites More sharing options...
Share Posted February 20, 2019 5 hours ago, Rodrigo said: Hi, I still have no idea what you're trying to achieve and what your issue is, but I updated a previous sample of a basic GSAP/VueJS app to use the Scramble Text plugin: https://codesandbox.io/s/l261n378km Feel free to fork it in order to use your own code. Happy Tweening!! Thanks, I am not sure what I am doing wrong .. There error it is showing me is: --- CONSOLE -- [Vue warn]: Error in mounted hook: "Cannot tween a null target." found in ---> <SHeader> at src/components/sHeader.vue <VContent> <VApp> <App> at src/App.vue <Root> vue.runtime.esm.js:619 Cannot tween a null target. -- I have imported all from gsap in the main.js file. <script> export default { mounted() { const { lawn2019 } = this.$refs // // eslint-disable-next-line const tl = new TweenLite() tl.to(lawn2019, 3, {scrambleText:"THIS IS NEW TEXT"}); } } </script> Link to comment Share on other sites More sharing options...
Share Posted February 20, 2019 A coupple of things. First check that the component's refs object indeed has a lawn2019 property in it. You can create a console.log() call to inspect the entire $refs object. Right now GSAP is complaining that the element is null right now. Be sure that in your template you actually add the ref to a specific DOM element like this: <div ref={"lawn2019"}></div> Also there is no need to create and store a GSAP instance in memory if you're using it only in the mounted hook, in that case just create the Tweenlite instance right away: mounted: function () { TweenLite.to(this.$refs.lawn2019, 3, { scrambleText:"THIS IS NEW TEXT" }); } 1 Link to comment Share on other sites More sharing options...
Share Posted February 20, 2019 1 hour ago, Rodrigo said: A coupple of things. First check that the component's refs object indeed has a lawn2019 property in it. You can create a console.log() call to inspect the entire $refs object. Right now GSAP is complaining that the element is null right now. Be sure that in your template you actually add the ref to a specific DOM element like this: <div ref={"lawn2019"}></div> Also there is no need to create and store a GSAP instance in memory if you're using it only in the mounted hook, in that case just create the Tweenlite instance right away: mounted: function () { TweenLite.to(this.$refs.lawn2019, 3, { scrambleText:"THIS IS NEW TEXT" }); } Thanks for the reply, I have checked and tried them all .. no luck yet. Link to comment Share on other sites More sharing options...
Share Posted February 20, 2019 8 hours ago, Rodrigo said: Hi, I still have no idea what you're trying to achieve and what your issue is, but I updated a previous sample of a basic GSAP/VueJS app to use the Scramble Text plugin: https://codesandbox.io/s/l261n378km Feel free to fork it in order to use your own code. Happy Tweening!! Ok I copied all the code and replicated on the app.vue file. ok so the logo is rotating and working fine ... but the scrambleText is throwing the error: invalid scrambleText tween value: [object Object] CSSPlugin.js:99 Link to comment Share on other sites More sharing options...
Share Posted February 20, 2019 Bascally that means that you're passing an object to the Scramble Text plugin, when you should be passing a string. Check the value you're passing to the plugin in your GSAP config object. 1 Link to comment Share on other sites More sharing options...
Share Posted February 20, 2019 2 minutes ago, Rodrigo said: Bascally that means that you're passing an object to the Scramble Text plugin, when you should be passing a string. Check the value you're passing to the plugin in your GSAP config object. ok, How do I check that. Guide please. Link to comment Share on other sites More sharing options...
Share Posted February 20, 2019 Using the console or some debugging tool from the browser. What is the code you have for the GSAP instance? That would be a good starting point. 1 Link to comment Share on other sites More sharing options...
Share Posted February 20, 2019 3 minutes ago, Rodrigo said: Using the console or some debugging tool from the browser. What is the code you have for the GSAP instance? That would be a good starting point. I am using your code from here: https://codesandbox.io/s/l261n378km The only difference i see is that I am using Vuetify and in your code I guess you are using bootstrap. Also now I notice you are also using scrambletextplugin ... do i also have to use that ..installing gsap alone won't do? Link to comment Share on other sites More sharing options...
Share Posted February 20, 2019 Well I don't know what to tell you, that code is working, but something you're doing is generating the error. Are you sure you have the scramble text plugin in your setup? Are you importing it or adding it to the HTML file using a script tag? It seems that could be the source of the error, since is being returned from the CSS Plugin. 1 Link to comment Share on other sites More sharing options...
Share Posted February 20, 2019 Just now, Rodrigo said: Well I don't know what to tell you, that code is working, but something you're doing is generating the error. Are you sure you have the scramble text plugin in your setup? Are you importing it or adding it to the HTML file using a script tag? It seems that could be the source of the error, since is being returned from the CSS Plugin. Yes that is it! That was the issue. Thank you. Link to comment Share on other sites More sharing options...
Share Posted February 20, 2019 Check this on how to use bonus plugins/tools in your npm set up: https://greensock.com/docs/NPMUsage Scroll to the middle of the page. Also remember to add them to the .gitignore file, if you're uploading the source to a public repo. Happy Tweening!! 1 Link to comment Share on other sites More sharing options...
Share Posted February 20, 2019 Thank you so much for your help. Have a nice day! 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now