Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Rodrigo last won the day on March 17 2019

Rodrigo had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by Rodrigo

  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. 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.
  6. 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.
  7. 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.
  8. Rodrigo

    Animation in IE8

    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.
  9. Rodrigo

    Animation in IE8

    Yikes!!! Sorry about that, I forgot how the plug in works in that matter. Well you learn something new everyday. Cheers, Rodrigo.
  10. Rodrigo

    Animation in IE8

    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.
  11. This is very simple, GSAP rocks pure and simple, like Jack, Carl and many others have said many times, jquery has made our lives very simple and cool things have been done with it, but now thanks to the incredible job Jack and Carl are doing, I now use jquery for everything involving javascript except animation, for that if you don't use GSAP you're wasting your time because you're probably writing more code than needed and you're struggling for features that are native in GSAP. GSAP usage is so simple that makes animating in JS so much fun, and because you can mix it with every other library and jquery plugin the possibilities are infinite. I can't remark this enough but thank you both for the incredible job you're doing and will keep doing, i have no doubts about that. Cheers, Rodrigo.
  12. 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.
  13. 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.
  14. 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.
  15. 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.
  16. 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.
  17. 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.
  18. 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.
  19. 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.
  20. Hi, I completed the example a little more and added the code in order to make it more simple to view and use, so take a look at it, at the same address: http://www.websnap.cl/samples/scroll.to.sample.html Best, Rodrigo.
  21. 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.
  22. Hi Jeff, The easiest way to do that is to add an id name to your anchor, and then set the Tween to that point using the scrollTo plugin and some method to get the offset position of the anchor. Something like this: HTML blah blah blah blah <a href="#" onclick="gotoAnchor1()">go to anchor1</a> blah blah <div class="yourClass">blah blah blah blah blah blah blah blah<span id="anchor1">blah blah blah blah blah blah</span> blah blah blah blah...</div> Javascript var anchor1 = document.getElementbyId("anchor1"); var posTop = anchor1.offsetTop; function gotoAnchor1() { TweenLite.to(window, 2, {scrollTo:posTop}); } Now in JQuery it would be like this: HTML blah blah blah blah <a href="#" id="link1">go to anchor1</a> blah blah <div class="yourClass">blah blah blah blah blah blah blah blah<span id="anchor1">blah blah blah blah blah blah</span> blah blah blah blah...</div> SCRIPT $(document),ready(function(){ var elem = $("span#anchor1"), elemPos = elem.offset().top; $("a#link1").click(function() { TweenLite.to(window, 2, {scrollTo:elemPos}); }); }); Hope this helps, Rodrigo.
  23. Ok, now we're talking. Go to the jquery api reference and look for the offset property and use that to store in a variable that object position, and then you tell your tween to scroll to there, something like this: var elemOffset = $("#elemID").offset().top; TweenLite.to($(#elemID"), 1, {scrollTo:elemOffset}); For more info on the offset property check here: http://api.jquery.com/offset/ Edit: For some reason i got no time to check my fiddle with the scroll to plugin, which is not working properly, but I set up a live example that has all the script and styles in the html file so you just have to look the source code to check it out. Now for what I've been reading in your posts I'm guessing that you're creating a site with superscrollorama and that the object position is not it's final position, that's why in my example there is a blue div in the middle of the text (that is for demonstration purposes), so you can create an empty div in the final position where you want to scroll and it shouldn't interfere with the layout of your page. http://websnap.cl/sa....to.sample.html Let me know if this help you and if you could post some code in order to see what you're trying to do to get a better idea. Cheers, Rodrigo.
  24. Hi, Honestly I'm not quite sure what is it you're trying to do. As far as I know superscrollorama is a parallax plugin, that triggers Tweens/Timelines depending on the scroll position. If you want to click on a menu element or button and use the scrollTo plugin to go to certain part of the page and during that scrolling use superscrollorama to trigger a Tween/Timeline, there should be no problem in doing that. Now if you want to scroll to one point, then another and then another, you could chain your tweens in a timeline. Anyway take a look at this and tell me if this helps you in any way: http://jsfiddle.net/rhernando/x2MJd/3/ It would help if you could post some code of what is it that you're trying to achieve to get a more complete idea of what you want. Cheers, Rodrigo.
  25. Hi and welcome to the forums, Mhh.... it seems like a job for Jack and/or Carl here. The problem is not when you scale down and then back to 1, that works fine in IE 6, 7 & 8 (which are the ones that don't support css3 transforms). The problem is when you set a scale number bigger than 1. For example if you set a scale smaller than 1 in mouse out and a scale bigger than 1 in mouse over, it won't scale past the original size. And in IE7 it does changes the margin-left property of the first element to 0 For more illustration check the following: http://jsfiddle.net/rhernando/EjxPJ/1/ Best , Rodrigo.