Rodrigo
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Everything posted by Rodrigo
-
Hi, It's just a syntax issue, you should declare it like this: $(topArea).animate({top: "-40px"}, 250, "easeInOutBounce"); And also you could declare it like this: $(topArea).animate({top: "-40px"}, {duration:250, easing:"easeInOutBounce"}); First put "ease", then if it's in/out/InOut and finally the easing function you want to use, unless you're using a native JQuery easing function like "linear" or "swing", in those cases there's no need to put "ease" at the beginning just the easing function's name as a string. Cheers, Rodrigo.
-
Hi Jeff, You mean using something like the JQuery UI slider (source) to control a timeline progress forward and backward?. If that's the case it's very simple, all you have to do is set the minimum and maximum values for the UI slider and associate the slider current value to a timeline progress, something like this: var scrollPos, progressValue; $(function() { $( "div#scrollMarker" ).slider({ range: "min", value: 0, min: 0, max: 1000, slide: function( event, ui ) { scrollPos = ui.value; progressTween(); } }); }); function progressTween() { progressValue = (scrollPos / 1000); TimeLine.progress(progressValue); } There are also a lot of slider codes out there in case you don't want to use JQuery's slider, just google. In terms of your second request I'm not quite sure what is what you want to achieve. Is a custom scrollbar using drag & drop animated with GSAP?, a menu that scrolls through the content of the div using the scrollTo plugin?. A little more info would be great. Cheers, Rodrigo.
-
Hi, In order to get the properties being animated you could use this: var div1 = $("div#div1"), log = $("div#log"); TweenMax.to(div1, 2, {top:400, left:400, onUpdate:updateFn, onUpdateParams:['{self}']}); function updateFn(tween) { log.html('top: ' + tween.target.css('top') + ' // ' + 'left: ' + tween.target.css('left')); } You can see it working here: http://jsfiddle.net/rhernando/rLDTu/1/ Cheers, Rodrigo.
-
Hi, I'm going to presume (and I'm maybe wrong) that your not familiar with Modernizr and YepNope. Those are two very cool libraries that could get the job done. Modernizr will test the visitor's browser in order to check if it support a specific feature (in this case css3 3D transforms) and YepNope will take that test result and load a specific set of files (it could also load just a single file) such as js and css files that will be loaded for that type of browser, like this there's no checking browser version or anything like that, you're just looking for if the browser supports that feature. In this case it would be like this: <script src="scripts/modernizr.3D.test.js"></script> <script src="scripts/TweenMax.min.js"></script> <script> Modernizr.load({ test: Modernizr.csstransforms3d, yep : ['scripts/css3d.js', 'scripts/yepnope/css3D.css'], nope: ['scripts/No.css3d.js','scripts/yepnope/No.css3D.css'] }); </script> So you just load the libraries (modernizr includes YepNope) and then you run the test. Once the test gets the results it takes the proper action. If the browser supports 3D transforms will load the files in the yep key:value pair, if it doesn't it will load the files in the nope key:value pair. The beauty of it it's that you can customize modernizr to include the test's you need, includes a series of classes in the html tag of the document and weights only 8.6 kb minified (you could go beyond it and gzip it and it would be even smaller) including YepNope. The document will look like this for a browser that supports 3D transforms (firefox 18): <html class=" js canvas no-touch csstransforms csstransforms3d svg" xmlns="http://www.w3.org/1999/xhtml" style=""> And like this if it doesnt (IE9): <html class=" js canvas no-touch csstransforms no-csstransforms3d svg" xmlns="http://www.w3.org/1999/xhtml"> Also modernizr can chek for and incredible set of stuffs allowing to create more concise code for each situation, so instead creating humongous css and js files filled with hacks you create separated files for each situation allowing you to deal with painfull degradation for IE browsers. In an aside note using YepNope independently allows you to create your own conditional logic to load your files both css and js. Take a look at them: http://modernizr.com/ http://yepnopejs.com/ Cheers, Rodrigo.
-
Hi Jamie and all, Lately I've been dealing with some personal issues that hasn't allowed me to participate in the forums in a good fashion. You're right the code should be in a $(window).load() event to work as expected, for the same reason I've tested my codes only in firefox 17, and for that I ask everyone to forgive me, but I'm sleeping like crap, dealing with my issues and my business so my free time is small. I hope if isn't too much to ask for you to complete the examples, the example's code is complete in the html file so there's no javascript file to download, in fact the script, in a moment when i lost a chromosome, is between the head tags. Again sorry everyone for the inconveniences and thank you for your understanding. Like always....Cheers, Rodrigo.
-
Hi, I've updated the examples with the code proposed by Jamie, but because the original sample had a menu and some animation that couldn't allow to see what happened on page refresh. Here are the updated links: http://websnap.cl/samples/scroll.to.sample.page.refresh.1.html http://websnap.cl/samples/scroll.to.sample.page.refresh.2.html The first one uses $(document).ready(function(){ TweenLite.set(window, {scrollTo:0}); //Rest of the code }); The second uses $(document).ready(function(){ $(window).bind('beforeunload', function () { window.scrollTo(0,0); }); //Rest of the code }); Cheers, Rodrigo. UPDATE: I moved the examples to my new blog, and created a slightly better sample for the page refresh here: http://codeaway.netii.net/sample.code/scroll.to/scroll.to.sample.page.refresh.html
-
Hi, You're welcome. I updated the example with the TweenLite.set, so you can see it in action. Now it would help if you could post some of your code or setup a fiddle to see why is the page going back to the last scrolled position, without seeing some of your code we'll be guessing. It maybe event bubbling, so it could help you to add some console.log() or alert() to your event handler's code to see if they keep firing after page refresh. Hope this helps, Cheers, Rodrigo.
-
That works perfect, just use it at the beginning of $(document).ready and you're set to go: $(document).ready(function(){ TweenLite.set(window, {scrollTo:0}); //Rest of the code }); Cheers, Rodrigo.
-
Hi Brigitte, Mhhh... honestly i don't know any other method than ctrl + F5 in order to clear the current document's cache of the browser. You're right in a tween scrolling environment page refresh creates quite a mess but also you have to consider that page refresh is not a standard user behavior, is more a thing that we do when we're testing over and over again what we're doing, you also should keep in mind that clearing the current document's cache would force to reload everything again, and that, if your page has a lot of images and scripts loading, can become a little annoying for some "give it to me now!!" type of users. Anyway doing a fast search on google i found this, take a look at them: http://msdn.microsoft.com/en-us/library/ms536691%28VS.85%29.aspx http://stackoverflow.com/questions/8155064/how-to-programmatically-empty-browser-cache Hope this helps, Cheers, Rodrigo.
-
Hi, I've been struggling with something like this lately. The fact is that I'm tweening quite some properties on a click event and the selector changes on every click. It basically goes like this, when the "next" button is clicked it takes the current active element and the following element and assign each one a different tween. If you click the "next" button again it takes the active element (which was the following element before) and the following element and they are tweened. In the same fashion there's a previous button. The problem is that if you click fast the elements get out of position if a return false is not present while detecting if the element is being tweened. This basically happens with the position properties, ie, left, right, margin left, margin right, x, etc. I've tried using relative and absolute positioning, increasing and decreasing present values with '+=' and '-=' or setting the values directly, and the idea is getting a smooth tween, pretty much like Carl's second fiddle. I also tried to create a timeline with labels in it so when you click a button you just use the tweenTo method to go smoothly to that label and if you click fast it just keeps advancing at the time scale of the timeline. Since the final idea is to create a thumbnail slider with 3D effect (this would be the degraded version of the script) there's a good chance that someone could come up with 20+ images and creating a timeline by hand putting a lot of labels could become quite a chore and use a lot of code which is what I'm trying to avoid. Here's and example: http://jsfiddle.net/rhernando/Cvs5N/1/ if you click fast the next button and at normal rate the previous button and then refresh the page you will see how the elements get out of position, and if you remove the comments of the return false line on each function you'll get the elements in the right position but not a smooth animation. Any thoughts will be very appreciated. Cheers, Rodrigo.
-
Hi, This is happening to me too, the last update of TweenMax.min.js does crashes a specific version of Dreamweaver CS4, the solution: use the uncompressed file and before you upload your file to the server point to the compressed one using a simple text editor. Besides so far using the uncompressed version has it's upside, code hinting for naming one, for example if you write TweenMax. inmediatly it brings every function asociated with the expression, which has allowed me to play a lot with some features. I asked Carl about this and Him and Jack were kind enough to tell me that they are aware of this but it's quite difficult to pinpoint what is crashing CS4. Besides if you look into the crash report there's not a lot of info to troubleshoot this issue. Also this is not happening in every CS4 so it's even harder to find out. Another solution would be to create your own compressed version of TweenMax.js but i wouldn't recommend that. Let's hope that the next update won't crash this specific version of CS4. By the way my version is 10.0 build 4117. Cheers, Rodrigo.
-
Hi, Take a look here http://www.pixastic.com/ Since it uses values and a function to set the colorize properties, you can tween those values and then pass them to the function and execute it using onUpdate to pass the values each time the tween updates. It could be like this: var colors = { greenImg : 0, redImg : 0, blueImg : 0 }, tn1 = TweenMax.to(colors, 1, {greenImg:1, onUpdate:updateFunction, paused:true});//to colorize it green function updateFunction() { //pixastic code here } $("#button").click(function() { tn1.play(); }); Hope this helps, Cheers, Rodrigo.
-
Hi, You should give your img tag an absolute position and a z-index of 0, and the content on your li (I'm going to presume that you're making a menu) a bigger z-index, like this: <style> img{ position: abosolute; top:0; left:0; z-index:0; } li a{ z-index:5; } li a:hover{ z-index:5; } </style> With that code you got one in top of the other and the code above them, after that you just have to create your events and handlers in order to achieve the effect. Check this fiddle, is not the same thing but is pretty close http://jsfiddle.net/4ALZb/6/. Hope this helps, Cheers, Rodrigo.
-
Hi, I'm pretty sure that there's a better solution for this, but for what i saw creating a tween for the child element solves the problem in IE but creates quite a mess in any other browser, so what I would do is to use feature detection (http://modernizr.com/ or other) in order to create a code that applies only for IE (what I like to call "painful degradation"), and another that works for the rest of the browsers. Playing with the fiddles i realized that you should check the offset position of the parent and child elements, then use an expression with the relation between both offsets and then a function that updates the offset of the child element as the tween progresses. Now this is a lot of work and before going into that maybe you could put the child div outside the parent and give it a bigger z-index, absolute position and tween it independently and at the same time with the bigger div. Like Carl said the solution is not simple, but depending on what you want to achieve may not be too complicated. Best, Rodrigo.
-
Yikes!!! Sorry about that, I forgot how the plug in works in that matter. Well you learn something new everyday. Cheers, Rodrigo.
-
Hi Jophine, Mainly your problem is that in the css plugin x and y stands for css3 2d transform properties translateX and translateY or translate with an array of values, and those properties are not supported by IE8 and older, just from IE9, something like this: transform: translate(500px, 700px) //equals to TweenLIte.to(bg, 10, {css:{x:500, y:700}}); Your solution is to change the css position property of your element to relative or absolute and use top and left, like this: TweenLite.to(bg, 10, {css:{left:'+=500', top:'+=700'}}); The += before the values indicate that you are adding those amounts to the actual values of top and left of the element. I updated your fiddle so you can check it: http://jsfiddle.net/cdWhF/45/ Hope this helps, Cheers, Rodrigo.
-
Hi, Try the tweenFromTo method, check the api reference: http://api.greensock...ml#tweenFromTo() var tl:TimelineMax = new TimelineMax(); tl.append( myTimeline.tweenFromTo("myLabel1", "myLabel2") ); Hope this helps, Cheers, Rodrigo.
-
No problem, actually i remembered because the second post is from a couple of weeks ago, so i remembered reading about it not too far ago, if that post wouldn't existed you just would have to wait until Jack or Carl give you an answer.
-
Hi, Maybe this could answer your question: http://forums.greensock.com/topic/6773-requestanimationframe-ticker-keeps-on-going/ http://forums.greensock.com/topic/6811-tween-engine-always-running/ Jack explained in both posts why the engine keeps running even with no active tweens. Cheers, Rodrigo.
-
Hi, The reason is because your Tweens have a -1 repeat value, which means that the Tweens will repeat endlessly, therefore the duration of your timeline is infinite and that amount of a trillion is just given by the code I guess. I don't know if that is what you want to achieve, I mean if you want that the tweens in your timeline repeat for ever you can use the repeat in the Timeline declaration, but also you have to consider that repeat is a method of TimelineMax, like this: var intro_tl = new TimelineMax({onComplete:initScrollAnimations, repeat:-1}); Although this will defy the purpose of having an onComplete call because basically your timeline will never be completed, therefore your function will never be executed, so you need to determinate how many times you want your tweens or your timeline to repeat, and assign that number in the declarations. In that scenario it may help to use the duration property as a setter, so it won't matter how long your tweens are, if you declare how long your Timeline should be, it will automatically adjust the time scale of the entire timeline to last the time you're giving. Hope this helps, Cheers, Rodrigo.
-
Hi, Me again, it kept going in my mind the starting point thing, have you tried with a fromTo tween, if you change that value in my fiddle it seems to work: var tn1 = new TweenMax.fromTo($("div#div1"), 1,{css:{left:0}}, {css:{left:'-' + width1 + 'px'}, paused:true, onUpdate:tn1Update, onreverseComplete:tn1RevComplete}); And also solves the problem of the question i asked Carl and/or Jack, it doesn't look pretty but it gets done. In that matter the question still stands guys, i hope you can give me some lights in that regard. Cheers, Rodrigo.
-
Hi, Actually the api docs said that Try the invalidate function, take a look at the docs http://api.greensock...ml#invalidate(), that at least didi the trick in one example I've made, you can check it here http://jsfiddle.net/rhernando/SbpPj/. Now Jack and/or Carl a question, in the fiddle mentioned above when you start the tween and click on the blue div while is tweening the element grows and tweens to the new position as expected, but when you reverse it the start position of the tween changes, if the current values of the tween are honored and later you have an updateTo function that changes those values when the tween reverse is completed, why this happens?, I'm missing something?, i know it says that is not recommended but that is why i putted that function when the reverse is completed to restore the vars of the tween again, then when you tween it again and then reverse it, it should go to the starting point, and that updateTo is not having the desired effect. Cheers, Rodrigo.
-
Hi, I'm assuming that you're using srcoll triggered tweens, rigth?, if that is the case, have you tried using eventCallback method to see if you can get the values back to what you need?. Try using an onreverseComplete, in order to see if when the tween goes back to the starting pointyou can set the original values: var tn1 = new TweenMax.to(elem, 1, {css:{left:-newwidth}, onreverseComplete:revComplete}), function revComplete() { TweenMax.set(elem, {css:{width:originalWidth}}); tn1.updateTo({css:{left:-originalWidth}}); } Also you could try using onUpdate in order to call a function with some conditional linke to the tween progress in it: var tn1 = new TweenMax.to(elem, 1, {css:{left:-newwidth}, onUpdate:updateFunction}), tn1Progress = tn1.progress(); function updateFunction() { if(tn1Progress == 0) { TweenMax.set(elem, {css:{width:originalWidth}}); tn1.updateTo({css:{left:-originalWidth}}); } } Also i went to the site you set up and in the only element and in the blog element i couldn't click on anything, the element that accepts a click is on the top and just tween the butterflys to the sides. Hope this helps, Cheers, Rodrigo.
-
Hi, I created a little example of the scroll to plugin so you can check it out and see if it can help you a little: http://codeaway.netii.net/greensock-animation-platform-scroll-to-plugin-sample/ Best, Rodrigo.
-
Hi, You could use the total progress method, which is between 0 and 1 but includes the repeats of the timeline, for example if you repeat your timeline 5 times, each time your timeline completes the progress would be 0.2, so in order to determinate where the playhead should be you just have to divide 1 by the total times your timeline repeats: var repeats = 20, tl1 = new TimelineMax({repeat:repeats}), tl1ProgressUnit = 1 / repeats; tl1.totalProgress(8 * tl1ProgressUnit); In the code above the Timeline is repeating 20 times, and just like you said in your first post you want to advance it to the 8th repeat, so you multiply how many times you want your timeline to advance by the single progress unit that each repeat of the timeline represents. Check the api reference http://api.greensock...#totalProgress() Hope this helps, Rodrigo.
- 3 replies
-
- 1
-
-
- TimelineMax
- Looping
- (and 1 more)
