Jump to content

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


  • Content Count

  • Joined

  • Last visited

Community Reputation

0 Newbie

About bobdobbs

  • Rank

Recent Profile Visitors

1,775 profile views
  1. I've been experimenting with TweenLite and TweenMax. And I'm loving them. CSS3 allows for the creation of multiple background images. Is it possible to animate a targeted background image, where more then one background image is defined? Specifically, I might want to tween the 'background-position' property. In my experimentations I've been animating this for a single background image. But it looks like the syntax might not allow for atempts to manipulate the properties of a second background image. Could this be possible?
  2. In the following code, the first function works. However, the second function throws an error. tl = TweenMax ; $("#run").click(function(el) { var el = $(".box") ; tl.to( el , 2, { left: 10 } ) ; console.debug( "done" ); }) ; $("#reset").click(function (){ tl.reverse() ; console.debug( "reverse done" ); }); If I replace 'reverse()' with 'pause()' or 'reset()', I get similar looking errors: Uncaught TypeError: Object function (t,e,s){i.call(this,t,e,s),this._cycle=0,this._yoyo=this.vars.yoyo===!0,this._repeat=this.vars.repeat||0,t
  3. bobdobbs

    clunky animation

    My js code: $(document).ready(function() { var tl = new TimelineLite() ; $("#run").click(function() { tl.to( $(".box"), 2, { left: 10 } ) ; console.debug( "done" ); }) }); live: http://codepen.io/anon/pen/xCpiy The purpose of this code was to just play with greensock. I pretty much just copied the code from the top of the page here: http://api.greensock.com/js/ An animation occours. However, I expect the box to move smoothly from it's current position to the final position given in the script. In firefox, the element just jumps, without any gradual animation. In
  4. How do I execute a function after an animation has completed? I've got a simple animation: I grab an element, and then I animate it. Lets say my animation function is called changeState(). I want to do this sequence: 1. changeState() 2. selectNextElement() 3. changeState() selectNextElement() should only run once changeState() has completed it's animation sequence. Here's my stub for changeState: // get current block and animate it function changeState() { var currentBlock = $(".current") ; // colortween the current block var tl = new TimelineMax() ;
  5. I'd like to pause my timeline at a particular point. How do I do this? This is the code I have so far. http://hastebin.com/soqelufado.pl The code repeats, but I'd like to pause it before it repeats. I figure that I should do this my providing a parameter to the final tween, which currently looks like this: . to( $(els).eq(2), 2, { left: 0, delay : 3 } ) So, how do I make this tween pause after it runs? Also, if I'm right, and there is documentation for this. where is it? Thanks.
  6. I've been struggling with my first challenge: making a seamlessly cycling slideshow with timelinemax. So far, no matter what I do, after the animation cycles for the first time, I get an empty pane until the first animation in the chain completes. I've tried a number of ways to prevent this, but to no avail. This is what I have so far: My viewpane is 960px wide. It is initially occupied by the first slide, while the other slides are outside the right edge of the pane. All slides have a starting z-index of 100. var tl = new TimelineMax({repeat : -1}) ; tl.to( slides
  7. Hey Jamie. Thanks again! That makes my result make so much more sense to me. Also thanks for letting me know about logging with commas. This seems to work in chrome as well firefox. I had no idea about this before, and it is massively helpful. If you have the patience, I've got one last question: Am I taking the right approach to creating a slideshow? You might already be able to tell: I'd like to use the callback to increment an index. currentSlide will be incremented, and the new slide will then be animated. After every slide is animated, the sequence will be repeated using t
  8. Oh, darnit! I didn't know about the string concatenation symbol! I have now idea how I got this far without knowing this! Thanks for pointing this out. I'm now getting something back from the onCompleteHandler. Console prints: slide: [object HTMLDivElement] This is still unexpected: I'm expecting an object to be dumped. Instead it looks like I'm getting a description of the object. So I'm not sure if I'm passing in an object to onComplete, or passing in something else. So confusing! Still confused. But it looks like I'm making progress
  9. Hey Jamie. Thanks for pitching in. I guess I expect the callback to have access to the members of it's parent, because it's an inner function. My expectation is that inner functions can access the state of the parent. What I found particularly confusing in my testing was this: 'window' is coming back as undefined. For the moment, I put the callback inline. And it still doesn't seem to be able to access the parents data. Currently I have this: var slides = window.chickenSliderApp.slides ; currentSlide = window.chickenSliderApp.slides[1] ; var tl = new Timel
  10. Hey Jack. I still can't quiet get it to work. It seems as if any references to the global scope fail, and execution then stops. for example, this works as expected: var slides = window.chickenSliderApp.slides ; // returns a jquery object currentSlide = window.chickenSliderApp.slides[1] ; var tl = new TimelineMax() ; tl.to( currentSlide, 2, { left : 0, onComplete : function (){ console.debug("in onComplete" ) ; } } ) ; In this case, I can see "
  11. I'm in the process of creating a functions to create a slideshow. my variable 'slides' is a jquery object, containing dom elements that will be my slides. I pass 'slides[1] to my timeline function. I'd like to use the onComplete callback to increment the value of currentSlide, and then repeat the animation. However, I discovered that I couldnt' access the variable currentSlide from the callback. Doing a little poking around, I found that I couldn't access any objects from the callback. Is this expected behaviour? Or am I doing something wrong? My code: var slides =
  12. Hi. Thanks for the help. I finally got it to work. I split the code into two lines. Instead of declaring and definging the variable 'tl' in one line, I did two experessions: The first line declares, the second line defines. var tl = new TimelineMax() ; tl.to( slides, 2, { left : 0} ) ; When I split my code into two lines the animation worked.
  13. Hi. Sorry, my url to a paste was broken. My code is below. As you can see, I have declared a timeline variable. But I still get the error. The variable 'window.myApp.slides' points to a jQuery dom selector. var slides = window.myApp.slides ; var tl = new TimelineMax( tl.to( slides, 2, { left : "0px" } ) ) ;
  14. I've been playing time with tweenmax. I pretty soon realized that I couldn't get the effect that I wanted without using timelinemax. I'm loading tweenmax into my browser. But I cant do anything with it. when I start do anything with tl.to(...) chrome's console give me the error "uncaught exception: cannot call method 'to' of undefined. Console references me to the line where I use 'tl,to(). The sample code I'm working with can be seen at hastebin.com/midacafegu.vbs