Jump to content


  • Posts

  • Joined

  • Last visited

Everything posted by JohnPett

  1. Hi Rodrigo, Here is the result of using your plugin, thanks again for the help! www.meadowsinthemountains.com/ JP
  2. Rodrigo! Thanks for this. I have decided to go for a more lightweight approach and just use your function with JQuery as it seems the Greensock plugin isn't entirely needed here! Thanks again for your help. JP
  3. Yeah, the #night <div> is the only one I can't get to reverse. So annoying, when there doesn't seem to be any obvious syntax changes. I did try the fromTo method, but it doesn't work. This is the same in all browsers I have tested. Please help me! Thanks, JP
  4. Hi there! Having issues with reversing the first tween in my animation. It doesn't seem to do the reverse like all the others. I have just used a simple TweenMax: controller.addTween('#fade-it1', TweenMax.from( $('#fade-it1'), .5, {css:{opacity: 0}})); I have also hosted the project here: http://yaocho-digital.com/meadows/ Any help would be great! Thanks, JP
  5. Ah! I understand. Thanks very much. JP
  6. I realised I didn't even say please! What an idiot! Any help would be gratefully received. Thanking you.
  7. Hello! I am currently facing an issue with animating in cirlces/dots. The process I am using is that I have a transparent .png, which animates from zero width to 20px, for example. The problem comes with the transformOrigin, which when set to 50% 50% still animates in from the top left of the element. I have tried various methods of using CSS, to create vertical and horizontal aligning <div> in a parent <div>, but this doesn't create the effect of the dot animating from the centre of itself. I have hosted my current code here. $(function() { var tl = new TimelineLite(); tl.to( $(".dot1"), 0.5, {css:{width:"20px", height:"20px"}, transformOrigin: "50% 50%"}); tl.to( $(".dot2"), 0.5, {css:{width:"30px", height:"30px"}, transformOrigin: "50% 50%"}); tl.to( $(".dot3"), 0.5, {css:{width:"25px", height:"25px"}, transformOrigin: "50% 50%"}); tl.to( $(".dot4"), 0.5, {css:{width:"5px", height:"5px"}, transformOrigin: "50% 50%"}); });
  8. Thanks Carl, solid reply! Have a good weekend!
  9. Hi Forum-goers, I am completely new to this platform and am having a few issues getting my timeline to run all objects at the same time. In my code I am simultaneously running another plugin that counts up numbers, which you can ignore, but I have included in the code any how. What I want to achieve is that all of the bars in the chart animate out at the same time. Any help would be great : ) $(function() { var tl = new TimelineLite({align: "start"}); tl.to( $(".bar1"), 0.5, {css:{width:"200px"}, ease:Strong.easeInOut}); $('.percentage1').countTo({ from: 0, to: 75, speed: 3300, }), tl.to( $(".bar2"), 0.5, {css:{width:"150px"}, ease:Strong.easeInOut}); $('.percentage2').countTo({ from: 0, to: 50, speed: 3300, }), tl.to( $(".bar3"), 0.5, {css:{width:"125px"}, ease:Strong.easeInOut}); $('.percentage3').countTo({ from: 0, to: 35, speed: 3300, }), tl.to( $(".bar4"), 0.5, {css:{width:"100px"}, ease:Strong.easeInOut}); $('.percentage4').countTo({ from: 0, to: 25, speed: 3300, }), tl.to( $(".bar5"), 0.5, {css:{width:"75px"}, ease:Strong.easeInOut}); $('.percentage5').countTo({ from: 0, to: 15, speed: 3300, }), tl.to( $(".bar6"), 0.5, {css:{width:"50px"}, ease:Strong.easeInOut}); $('.percentage6').countTo({ from: 0, to: 2, speed: 3300, }); tl.play() }); If answering this is easier if you see the HTML, I have hosted that here: http://yaocho-digital.com/customerhub/popular-sizes.html