Jump to content


  • Posts

  • Joined

  • Last visited

Everything posted by deanpien

  1. I like the .add option (second pen). Was wondering if I could put a function inside the .add as a possible 3rd solution..?
  2. I am trying to gradually speed up the animation while it repeats. Is this possible using timeScale? The line of code I put in there: .fromTo(part1, 4, {timeScale:1}, {timeScale:15, ease:"Power0.easeNone"}); is obviously not doing the trick.. Thanks in advance.
  3. The issue: When replaying the SplitText animation, some of the letters on the right are not starting the animation straight away. Instead of sliding in as they are supposed to, they are already positioned and only start the animation from there. This doesn't happen when the animation plays for the first time, only when revisiting the first slide after paging through the other slides. This happens in Firefox, Opera and IE latest version.
  4. Thanks that worked in the codepen. However my actual function is as follows: part3 = new TimelineMax(); part3.call(lighttwo, null , null , "+=0.5"); function lighttwo() { if (navigator.userAgent.match(/MSIE 8/) !== null) { animatethree.add(part4b, 5.6); return tl; } else { animatethree.add(part4, 5.6); return tl; } } animatethree.add(part1, 0.2) .add(part2, "-=0.2") .add(part3, "+=0.1"); The function starts firing from the start. I've been trying to solve this for days..Any suggestion on how I can make this work even another workaround is appreciated. I basically want part of the master timeline to run for IE8 and another part for non IE8.
  5. Thanks for all the suggestions I have created a CodePen which mimics my scenario: http://codepen.io/anon/pen/vEQpVg In part3 the purpleBox is not moving and the function in part4 doesn't make the purpleBox fade. Seems like this is not the way to set things up..I am really new to all this stuff so that explains a lot. Thanks for the quick response. Really appreciated.
  6. Thanks for this. I am using this code: animatethree.add(part1, 0.2) .add(part2, "-=0.2") .add(part3, "-=0.1") .add(spottwo()); function spottwo() { if (_isOldIE) { animatethree.add(part4b); } else { animatethree.add(part4); } } but this doesn't work.
  7. In the Greensock Home Page animation it shows how to use a different code for IE8 using an if (_isOldIE) ..else statement. Then, in the codepen it states: tl.add( new TweenMax(star, duration, etc. etc. Is it possible to add a TimelineMax sequence there instead of TweenMax and is there a codepen example of this anywhere?
  8. Is transformOrigin supported in IE9? If not, is there a work around? Strangely enough I don't have an issue with this in IE 8. Box 2 is supposed to rotate from the top but doesn't seem to do this in IE9. Thanks in advance. Any suggestion is much appreciated.
  9. Ok thanks for clearing that up.
  10. Thanks, I made the corrections but it still doesn't work in IE8. The motion of the object sweeps in a different direction. The error console message in IE 8 states: Object doesn't support property or method 'addEventListener' Any work arounds?
  11. After using the bezier method I am running into a problem moving the same object, in IE8 only. (other browsers work fine.) In IE8 the object doesn't seem to disconnect properly from the bezier path and does it's own thing when I try to move it some new, straight direction. I tried to work around this by using the tl.set method on the object after the bezier motion, but that did not change anything. Is there a work around this?
  12. Thanks a lot, that solved my issue. I was rotating the div in which the image was wrapped, instead of rotating the image itself.
  13. The png in my project is wrapped inside a div, inside an li tag. The li tag has the css property "display: block; " I have not had a problem animating the other div's inside the same li tag, but trying to rotate this div around it's center is giving a problem. The image has fully loaded when I start animating.
  14. The codepen shows what I am trying to do. A pretty simple action. However, when I try do the same with a png image it doesn't turn around it's center. It turns around a center outside of the image. How can the center be placed inside the png? Thanks in advance.
  15. I've added the class "show" to the first li element. Corrected this: "#slider .slideshow .show" How do I trigger the dog()function on page change? I am guessing I have to move it elsewhere?.. Thanks for your help. Really appreciated!
  16. New to GSAP and Jquery. Very excited about the possibilities. I have been trying for days to make an animation work inside a slider without success. The animation works once when I use the window.onload method but this method needs window reload to work again. Sofar I have been working on giving the active slide (as in "visible slide") the css class of "show" by tying it to the previous and next button of the slider. Either the code is incorrect there or at the point of the function call (function dog) or the whole idea is just a no go. Any help is much appreciated! note: the 3rd slide is the one that is supposed to animate.