AdObeOne
-
Posts
41 -
Joined
-
Last visited
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
ScrollTrigger Demos
Downloads
Everything posted by AdObeOne
-
Hello PointC and Carl. Thank you both for your reply. To my great astonishment the code worked when I opened the file today. When I closed the files the last time it did not work. I tried using a class and using an ID for the path, but both did not work. And now, without changing a single character it works. There's something fishy with DreamWeaver CC. It still complains that Greensock commands in a included javascript file are undefined. Although the code works just fine. Also I noticed that it temporally indicates that files are included of which the names are part of the names that really are included. When I close the html file and reopen it those erroneous files are no longer indicated as being included. Very strange. Time for an update by Adobe. But I guess they're to busy now fixing other products with the big El Capitan problem.
-
Sorry about this basic question but I spent half a day trying to find the answer online. I replicated the GreenSock DrawSVG example in my web development tool to learn the basics. The circle, rect, ellipse and polyline are animated using an array. var shapes = $("circle, ellipse, rect, polyline"); Now I want to use paths instead to experiment with more complex shapes. How do I assign a path to an array? Thanks in advance for your help. Ad
-
Hello Jack. Thanks again for your help. It works. Strange that my website (www.pixelray.nl) works just fine where I include the javascript in the head like in the example code. That javascript controls the media queries and the animated menu and it works just fine. I would not expect the place of including the javascript to be the problem for the GreenSock code. DreamWeaver still complains that the GreenSock code in the javascript file of this example is undefined even when it is included just before the end of the body tag. But I'll just ignore that I sure am glad that GreenSock exists. It makes my work much more easy and much more fun. Thank you.
-
Test.zipHello Jack, Here are the file for a basic example. I hope this helps. Kind regards, Ad
-
Thank you Jack for your reply. The problem / solution should be generic, not specific to DreamWeaver. Neither is it a case of a specific command not working. It's seems to be a scope / path problem. GreenSock commands within the <body> tags in a html file work fine. GreenSock files included in the <head> tag of that html file. GreenSock commands in a separate javascript file don't work. A file that is included in the <head> tag of that same html file, after the GreenSock files. That should work, right? That is how the SublimeText and WebStorm/PhpStorm users would do it as wel. Isn't it? I'm not a hard core web developer. I just want to make a piece of animated / interactive content using GreenSock, that I then give to a web developer to implement in the site of his client. DreamWeaver is ideal for me. But I can't cram everything into the html file, just to make it work. I want to deliver the code in a nice separate javascript file with the assurance that it works.
-
Hello Jack. Thanks for your reply. Yes, wonky, but it works. I just converted the split text example from the code pen to Dreamweaver to understand the principle of what should go where. Now I'm trying to use the same wonky logic to enable the user to place 4 puzzle pieces on to 4 placeholders, using the draggable and droppable functionality of GreenSock. I can't get it to work. Doesn't anyone use DreamWeaver in combination with Greensock? I'm sure there must be a simple thing or a few things that I should or should not do to make the Greensock code in a separate js file animate elements in a html file within a DreamWeaver project. Can anyone help me?
-
Thank you Jack. Moving the <script> tags to the bottom of the <body> did the trick. The animation works now. But still DreamWeaver CC complains that all the GreenSock-commands are undefined. It indicates this when you hover the mouse over the red line number of a file. The red indicating that there is an error in that line. So it is not an element name about which DreamWeaver complains that is doesn't know yet when it loads the javascript file, when the <script> tag is in the head section. Strange that this solution works and that DreamWeaver CC still complains about it.
-
Hello, I apologize for this newbee question, but I can't find the answer. I want to use GreenSock commands that are in a js file (called TextTest2script) in a folder called "js". I've included all the necessary files in the head tag in the html file. <script type="text/javascript" src="js/TweenMax.min.js"></script> <script type="text/javascript" src="js/SplitText.min.js"></script> <script type="text/javascript" src="js/TextTest2script.js"></script> But Dreamweaver CC 'says' that the commands are undefined. How do I resolve this? Thanks for your help, Ad
-
Thanks Carl for your response. The reason I started using Greensock is that I found the function I used here online as a solution for reversing an animation when the same visual element is clicked every second time. Using this function in Edge Animate worked just fine. So I had no reason to suspect that the use of reverse(d) was not correct. In documentation about a fromTo tween command I found that the special properties should be within the curly braces. Because the paused:true did not seem to work outside, i tried it inside the {}. Good to know about the auto update in CodePen. When things don't work, you start to wonder if the preview is updated. The logic of the solution seems very strange to me. But it works. And that is what counts. Wouldn't it be great if there were an extra event, besides the click and double click. A toggle click event, which would reverse the functionality of the function that was assigned to it. Greetings from The Netherlands, Ad
-
Hello, again (alas) I'm afraid I've got another question. Why does this not work? http://codepen.io/AdObeOne/pen/aFnkC If I remove the function from the js-code the tween command is executed. When I add the function the tween command is not executed and nothing happens when I click on the word. Also, why does paused not work when I add ", paused:true" to the tween command? I want to make the tween pause until the word is clicked. If I uncomment the pause command then the tween is paused. But if I use this code in DreamWeaver then I have to click the word twice before the tween command is executed. So there this function does work, except from the double clicking. Also why is there not a Run button when I log in to CodePen and start a new codepen? I tried to find the answers online, but couldn't find them Thanks for your help, Ad
-
Thank you Carl for this clear answer. Strange that the word moved when I replaced "tLinkedIn;" with the tween command. Sorry about not putting a method after "tLinkedIn", but I removed it, after I tried .play() and .restart(). Thanks for the CodePen. I've got it working in DreamWeaver now. I think i'm going to have a lot of fun using Greensock. Thanks for porting it from actionscript to javascript. I used to use actionscript, about 5 years ago. Time to dust off that knowledge and apply it to javascript and Greensock.
-
Thank you Carl for your response. Using a CodePen wouldn't be a good idea, I think, because it would not be the same context (DreamWeaver CS6) in which the code works. I have attached a zipped file of the stripped down word cloud DreamWeaver CS6 project. Using the tween command directly in the fLinkedIn function makes the "LinkedIn" word move. Using the referenced tween "tLinkedIn" does not make the word move. What is wrong? Thanks for your help, Ad
-
Jack, thank you for your response. I like to use and learn as little number of tools as possible. So I'm kind of glad that I can stop using Edge and start using a much more powerful tool: Greensock. I read about not having to use the css selector, but it also said there was a small speed price to pay for the convenience. So I don't mind being explicit. I attempted the same word cloud animation yesterday in DreamWeaver with Greensock, but I can't get the referenced tween to work. I made a new post about it. I'm going to add a zipped DreamWeaver project file to that post momentarily, as Carl suggested.
-
After a failed attempt to make a simple word cloud animation in Edge Animate using Greensock, I tried it again today in DreamWeaver using Greensock. I have a dozen divs defined in the html page. Something like this: <div id="apLinkedIn" class="kopGrootFontWit" onclick="fLinkedIn()">LinkedIn</div> I tried to link the click event using javascript and I also tried jquery, exactly as shown a multiple forums and examples, but that did not work. That's why I did it this way. What is suppost to happen is when a word cloud word is clicked it moves to the upper left corner and text about that topic "tLinkedInTekst" in this case, moves into view. When the word is clicked again the animations are reversed. This code is commented out at the moment. In a linked javascript folder I've got a javascript file with this content: var tLinkedIn = new TweenMax("#apLinkedIn", 0.5, {css:{x:-124, y:-104}, reversed:false}); var tRest = new TweenMax.to(["#apKlantBeleving", "#apCommunityManager", "#apContentAgenda", "#apInternetMonitoring", "#apMailChimp", "#apTooling", "#apPinterest", "#apWebcare", "#apTwitter", "#apFacebook"], 0.5, {css:{autoAlpha:0}); var tLinkedInTekst = new TweenMax.to("#apLinkedInTekst", 0.5, {css:{y:-390, autoAlpha:1}}); function fLinkedIn () { TweenMax.to("#apLinkedIn", 0.5, {css:{x:-124, y:-104}, reversed:false}); /* if (tLinkedIn.reversed()) { tLinkedIn.play(); tRest.play(); tLinkedInTekst.play(); } else { tLinkedIn.reverse(); tRest.reverse(); tLinkedInTekst.reverse(); }; */}; I see the clicked word move when I use the single tween command as shown in the file above. But when I try to use the reference to that tween command nothing happens. What is wrong? Thank you in advance for your help. Kind regards, Ad
-
I would like to get rid of Edge, but it helps visually. I was very enthusiastic about Edge at first. For simple animations, it is a great visual tool. But as animations become more complex, or if you want to combine more than one animation it becomes cumbersome. I will try to create the word cloud animation without Edge in DreamWeaver or CodePen. But as I am new to Greensock, I have yet a lot to learn. But I think Greensock is the way forward for me. Rodrigo and Carl, thanks for your response. Ad
-
Hello, I'm trying to make a simple animation of a word cloud. About a dozen words on which you can click. The clicked word then moves to the top left corner and text about that topic moves into view, fading in, from an off stage position. All the other words in the word cloud fade out. All the moving works fine. The change of opacity from the initial value to the new value works ok as well. But the reverse tween of the opacity value does not work. Here is the code for the click handler of one of the word cloud words called "LinkedIn". var eKlantBeleving = sym.$("KlantBeleving"); var eCommunityManager = sym.$("CommunityManager"); var eContentAgenda = sym.$("ContentAgenda"); var eInternetMonitoring = sym.$("InternetMonitoring"); var eMailChimp = sym.$("MailChimp"); var eTooling = sym.$("Tooling"); var eLinkedIn = sym.$("LinkedIn"); var ePinterest = sym.$("Pinterest"); var eWebcare = sym.$("Webcare"); var eTwitter = sym.$("Twitter"); var eFacebook = sym.$("Facebook"); var eLinkedInTekst = sym.$("LinkedInTekst"); var tLinkedIn = TweenMax.to(eLinkedIn, 0.5, {css:{x:-124, y:-104}, reversed:false}); var tRest = TweenMax.to([eKlantBeleving, eCommunityManager, eContentAgenda, eInternetMonitoring, eMailChimp, eTooling, ePinterest, eWebcare, eTwitter, eFacebook], 0.5, {css:{opacity:0}}); var tLinkedInTekst = TweenMax.to(eLinkedInTekst, 0.5, {css:{y:-390, opacity:1}}); $(eLinkedIn).on("click", function() { if (tLinkedIn.reversed()) { tLinkedIn.play(); tRest.play(); tLinkedInTekst.play(); } else { tLinkedIn.reverse(); tRest.reverse(); tLinkedInTekst.reverse(); }; }); What am I doing wrong? Thanks in advance for your help.
