benjino
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Everything posted by benjino
-
1.11.2, downloaded it from the get GSAP in the upper left hand corner of the website and downloaded JS, Javascript, not AS3 or AS2.
-
OS X 10.9 latest Chrome latest Safari latest GSAP v12 Your code should be working in my html file. It's just an html file with everything in the right place, <script> above closing body tag, src="" above the script. It's all there, all correct, copied and pasted and doesn't work. Here it is below: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Untitled Document</title> <style> .headsub { margin: 0 auto; position: relative; top: 100px; width: 100%; text-align: center; } h1, h3 { font-size: 50px; font-size: 5rem; } </style> </head> <body> <div class="headsub"> <h1 id="headline">Increase your bottom line<br> …in <em>today's</em> world</h1> <h3 id="subhead">Bring customers to your business via the Internet</h3> </div> <script type="text/javascript" src="greensock/minified/TweenMax.min.js"></script> <script> // wait until DOM is loaded $(document).ready(function(){ // wait until window is loaded (images, links etc...) window.onload = function() { var headline = document.getElementById("headline"), subhead = document.getElementById("subhead"); TweenMax.staggerFrom([headline, subhead], 1, {delay:1, scale:0, opacity:0.3}, 2); }; }); </script> </body> </html>
-
When I use your code it doesn't work. Anything you've shown me other than what has worked isn't working. I got what is working from Greensock's jumpstart slideshow and adapted it to what I wanted. It works. Now with yours it doesn't work. I don't understand why it would not be working. Thanks for the autoAlpha explanation and all your help so far.
-
I wanted the headline and subhead to appear from nothing, first the headline, then the subhead. When I added immediateRender:false it still didn't make anything work with the code you shared that you now have doing something on http://codepen.io/jonathan/pen/iGHlw; it works on yours but not in mine. I'm using a flat html page and I removed the CSSplugin as well. Still nothing works. The only thing that works is the original code here: window.onload = function() { var headline = document.getElementById("headline"), subhead = document.getElementById("subhead"); //The last parameter with value of .25 is the stagger amount. Try changing it to 1 see how it impacts the animation. TweenMax.staggerFrom([headline, subhead], 1, {delay:1, scale:0, opacity:0.3}, 2); } I'm now boggled as to why your code doesn't work.
-
Neither of those work. I see what you are sharing here but for some reason they don't work. Here's my code: <body> <div class="headsub"> <h1 id="headline">Increase your bottom line<br> …in <em>today's</em> world</h1> <h3 id="subhead">Bring customers to your business via the Internet</h3> </div> <script type="text/javascript" src="greensock/minified/plugins/CSSPlugin.min.js"></script> <script type="text/javascript" src="greensock/minified/TweenMax.min.js"></script> <script> // wait until DOM is loaded $(document).ready(function(){ // wait until window is loaded (images, links etc...) window.onload = function() { var headline = document.getElementById("headline"), subhead = document.getElementById("subhead"); TweenMax.staggerFrom([headline, subhead], 1, {delay:1, scale:0, opacity:0.3}, 2); }; }); </script> </body>
-
I'm new at this. I'm working with the following and trying to use $(document).ready() but it won't work. Here's what I am adapting and I can get it to work fine: window.onload = function() { var headline = document.getElementById("headline"), subhead = document.getElementById("subhead"); TweenMax.staggerFrom([headline, subhead], 1, {delay:1, scale:0, opacity:0.3}, 2); } Here's what I'm trying to do and can't get it to work: $(document).ready(function() { var headline = document.getElementById("headline"), subhead = document.getElementById("subhead"); TweenMax.staggerFrom([headline, subhead], 1, {delay:1, scale:0, opacity:0.3}, 2); }); What am I doing wrong?
-
Cool, now that's working! I put it up online. After adjustments this is what works best: TweenMax.to(imap, 10, {x:"-104", repeat:-1, ease:Linear.easeNone}); Of course that's not going to be true for everyone else; the width of the mc will cause the x value to change. I never got the right syntax with the parenthesis around the x value the entire time and did not realize that the extra frames would cause a problem either. I removed them. How do you know when or when not to use the parenthesis? What do they do?
-
Ok that would explain the difference in performance. I've never heard that before. Here's the zipped file. I use Firefox most often, do you recommend Chrome for this testing? I don't have a PC, I use a Macbook Pro 2009. File is zipped.
-
I start with Alaska on the left edge of the globe. I then find the x for it's movement to the left where Asia would be at the right edge of Asian would be at the right edge of the globe, and that x value is x=134. I plug this value in for x with the speed at 10 and it does the jump thing. I then reduce 134 down in increments of 5 and it starts looking better as I get down to 115, I then go in increments of 1 down to 106 and find that it works well with the following: TweenMax.to(imap, 10, {x:106, repeat:-1, ease:Linear.easeNone}); Buuut, when I put it up online live it does the 'popping' thing! So the swf in Flash behaves differently than the swf online! I then go to offset this discrepancy by adjusting the x value by going higher and lower in number. It works going lower. I also adjust the speed down to 15. Again, I also find that going to a lower x value than the x that it actually finishes on works better. I then find that the following works well with 15 as a swf in Flash: TweenMax.to(imap, 15, {x:0, repeat:-1, ease:Linear.easeNone}); (there is some very minor jerkiness or popping to it, though it is ok) Buuut, when I put it live it behaves differently! Currently as you see it here http://www.siegfriedmedia.com/irtoc it has TweenMax.to(imap, 15, {x:0, repeat:-1, ease:Linear.easeNone}); What is going on here? The swf and online live view shouldn't be any different! You should see the swf, how can I send it to you?
-
Having two maps helps a little and only spacing between those two as one mc. The example you shared is movement from one side of the stage to the other and my issue is with one side of a mask to the other. I'm running into the same issue as with the timeline based method I first started with. I do believe that with Greensock the solution is there. Why doesn't the x value correspond with the "to" or "from" on the x-axis of the stage? Would using the timeline with the 'offset' command be a solution? The problem is still the same, Asia becomes too far separated from Alaska. If I join two maps with the right spacing that will satisfy the solution for those two maps but the spacing still occurs, so it doesn't matter if I join two or more maps together, at the end of the last map there is going to be a big gap before the start of the first map. I have played with adjusting incrementally with great variance, and the settings you chose for the 'map of the world' animation will not behave the same going across the mask I have created for my situation. What other commands could I try?
-
That works with the syntax and values at TweenMax.to(map, 55, {x:-375, repeat:-1}); But, I run into the same issue I have found with using Flash's timeline too, and that is that I can get one end to finish and one beginning to start, but with a big gap between Asia and Alaska. If I make a new mc with two maps moved together with appropriate spacing between Asian and Alaska then I can make adjustments to the syntax and values so that that will work, but it will do the same thing but after these two maps joined together as a new mc go off the mask — there's the same big gap between Asia and Alaska. Would using TimelineLite/Max with "offset" be a clue? See, just after the far right of Asia has come onto the globe, Alaska needs to be there following it, so I need the same "map mc" replacing itself or another "map2 mc" coming in right where it needs to be. Also, I have 30fps set on Flash's timeline, I'm pretty certain that there is math involved in the -x value and the speed set in the TweenLite syntax.
-
I would rather focus on the specific things I need to learn to complete a project. Using TweenLite along with a little help on this forum, I've been able to get the yellow banana figure to work well; it's a stand-in for artwork I haven't completed yet. The globe is the issue now. It has flaws and limitations. Upper right Asia and Alaska need to be closer. The globe effect is created by tweening on the timeline in CS4 — no AS, no Tween engine, no Greensock. It is very, very limited, if I make any changes to it currently it breaks. I am certain that Greensock's engines will allow me to re-create the affect and allow me to control the speed of the effect of the spinning globe. Basically, it's a gradient sphere masking the map that is rectangular. The map slides across the sphere giving the effect that the globe is rotating. Here it is: http://siegfriedmedia.com/irtoc/ I'm pretty certain that the answers lie in the following case study: http://www.snorkl.tv/2011/05/real-world-benefits-of-oop-with-as3-for-the-completely-terrified-greensock-homepage-animation-case-study/#more-947, but I'm not certain which commands to focus on. Any help is appreciated. I'm new with Greensock.
-
Oh that cleaned it right up, thanks. Your solution is working well. Just to clarify, you suggested using TweenLite for the repeat and not TweenMax? My understanding is that TweenMax is optimized or designed for use for rotation. Does it matter which one I use for this purpose?
-
I'm trying to achieve a smooth transition from rotation to rotation. Currently the transition is not seamless. The easing or disabling of it creates a visible pause. I'm looking for a continuous rotation like with a second-hand on a clock. I thought that disabling the easing would do it. I've searched the forum for a solution to no avail. Is there something I am missing or is this not possible? import com.greensock.plugins.*; TweenPlugin.activate([TransformAroundPointPlugin, ShortRotationPlugin, TransformMatrixPlugin]); import com.greensock.*; import com.greensock.easing.*; import flash.geom.Point; TweenLite.to(mc, 5, {transformAroundPoint:{point:new Point(285,200), rotation:360}, ease:Linear.easeNone}); TweenMax.to(mc, 5, {rotation:"360", repeat:-1});