Jump to content


  • Posts

  • Joined

  • Last visited

jamesbcn's Achievements



  1. I have spent several days creating a very nice banner for a website. The main feature of this is a row of buttons which when clicked uses TimeLineMax to move the background image of the main panel to particular pixel-specified positions in a large background image. I have now installed the banner into the page, and found that making it responsive is not as easy as I anticipated. I had assumed that I would be able to make the content scale with the bounding box, but I've discovered that CSS can't do that. I am now looking for an option that doesn't involve me doing an extensive rework of the banner. One option I have looked at if putting it in an iframe - a bit of a kludge, but it does look as if it will work. Is there a better way to do this? Thanks, James (I have now used greensock on a couple of projects, and I like it)
  2. Carl, What I want is this. 1) The user presses a button, (say "Animate one"), that animation plays until the pause point (1 moves to the right). 2) The user presses another button, (say "Animate two"). This causes two things to happen: a. The previous animation plays the second half (1 moves back to the left). b. Once this has completed, the selected animation plays (2 moves to the right). (I made this codepen to try to solve the mechanics of a more complex animation I am creating, where each button gives an animation about a different subject, and the second half of each timeline is just making a neat transition between the different animations.)
  3. Thank you! Wonderful support. I've almost managed to get my code working completely as I wanted. Here it my latest version: http://codepen.io/jamesjohnson/pen/BbuLh The only thing I haven't been able to work out - how do I only play the current animation once the previous has finished? i.e. here: previous = current; current = this.timeline; previous.play(); current.play(); // I want this to play after the previous one has finsihed.
  4. (I've just noticed the title of my post doesn't match the content. That is because the title is another issue I'm having with the same code, but one which I think I've solved, or at least have some ideas I can try out.)
  5. If you look at the Codepen demo you will see I have three buttons, each linked to a different timeline. Clicking a button starts a timeline, which then pauses. I have two issues: 1) I don't want a button click to start a timeline if one is already active. I tried changing the test to if ( ( timelines[1].progress() === 0 ) && ( !timelines[current].isActive() ) ) { but that doesn't work. 2) My button code would obviously be better in a for loop, but if I do that JSLint says I shouldn't declare functions within a loop. I've googled for solutions but what I've found has been hacky or inelegant. Any ideas how I can solve that? I've been using GreenSock for about a week, and I love it! Great design.
  6. Wow, excellent responses guys. I'm joining the Greensock club!
  7. I think I've worked this out. Basically I need to use TimelineMax.tweenTo
  8. In this codepen example I have five buttons, and a timeline with five labels. When clicking on a button I want to move from the current location in the timeline, to the label corresponding to the button. In other words if you click on button 2, the animation should go from wherever it currently is to the point at label "two", so if it was previously at "one" the timeline should play forward from label "one" to "two", but if it was at position "three" it should play backwards from "three" to "two". How do I do this?