Jump to content


  • Posts

  • Joined

  • Last visited

Everything posted by bobdobbs

  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,this._repeatDelay=this.vars.repeatDelay||0,this._dirty=!0,this.render=r.prototype.render} has no method 'pause' I guess those methods aren't available to TimeLineMax. In which case, how do I do a reset or reverse?
  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 chrome, the element first jumps half-way through, and then animates. I get exactly the same clunkiness with timelinemax as well. I don't get it as much with tweenmax. I'm running this in the same browser that I'm running the demo's from greensocks site. The demo's run smoothly, but my simple test animation is too clunky to do anything with. What's going on here? What do I have to do to get smooth animations?
  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() ; tl.to( currentBlock, 1, { backgroundColor:"rgb(205,151,20)" } ) .to( currentBlock, 1, { backgroundColor:"rgb(152, 129, 74)" } ) ; }
  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[1] , 2, { left : 0, // after first animation, secretly move // first slide into new starting position // and make sure it slides over the previous slide onComplete : function (){ target = slides.eq(0) ; target.css("left", "960px") ; target.css("z-index", "2000") ; } } ) .to( slides[2] , 2, { left : 0 } ) .to( slides[0], 2, { left : 0, onComplete : function() { console.debug( "completed last anim" ); // give the first slide it's oringal z-index, slides.eq(0).css("z-index", "100") ; } } ) ;
  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 the 'repeat' property. Is this a sensible approach to take?
  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 TimelineMax() ; tl.to( currentSlide, 2, { left : 0, onComplete : function completeHandler (){ console.debug( "in completeHandler" ); console.debug( "slide: " . slides[0] ); } } ) ; Again, the animation actually happens. However, the script halts execution on the second debug line of the callback, with the error: "Uncaught TypeError: Cannot read property '0' of undefined" I created another test, using onCompleteParams as well an inline onComplete callback: var slides = window.chickenSliderApp.slides ; currentSlide = window.chickenSliderApp.slides[1] ; var tl = new TimelineMax() ; tl.to( currentSlide, 2, { left : 0, onCompleteParams: slides, onComplete : function completeHandler (){ console.debug( "in completeHandler" ); console.debug( "slide: " . slides[0] ); }, } ) ; I get a similar result: "Uncaught TypeError: Cannot read property '0' of undefined". I'm reading that article on scope presently.
  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 "in onComplete" printed to the console. However, this fails, and console prints 'undefined', and execution stops without "in onComplete" being printed: var slides = window.chickenSliderApp.slides ; currentSlide = window.chickenSliderApp.slides[1] ; var tl = new TimelineMax() ; tl.to( currentSlide, 2, { left : 0, onComplete : function (){ console.debug("in onComplete. Current slide: " . currentSlide ) ; } } ) ;
  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 = window.myApp.slides ; // returns a jQurey object currentSlide = window.myApp.slides[1] ; var tl = new TimelineMax() ; tl.to( currentSlide, 2, { left : 0, onComplete : completeHandler } ) ; } // this function does work. An animation occours function completeHandler (){ console.debug( "next slide: " . slides[2] ); // returns undefined. }
  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
  15. Ah! Problem solved! I was animating the background colour from one value to the same value! So, the animation was actually working. It just wasn't visible. Doh!
  16. Hi Rodrigo. Thanks for the tip! I'm now includeing the file CSSPlugin. However, I still seem to have the same problem: no result, and now errors. I edited my script to animate the width of the target element. That worked. However, I still can't seem to animate the background colour.
  17. I'm just getting started with gsap. I've created a simple script, but for some reason I can't get it to actually do anything. I'm getting zero results in both firefox and chrome on linux. What am I doing wrong? Here is the html source... <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta charset="UTF-8" /> <title>greensock test</title> <meta name="description" content="gsap test" /> <link rel="stylesheet" type="text/css" href="/css/test.css" /> <script type="text/javascript" src="/js/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="/js/TweenLite.min.js"></script> <script type="text/javascript" src="/js/gsap-test.js"></script> </head> <body id=""> <div id="outer-wrapper"> <header id="page-header"> </header> <!-- page-header ends --> <section id="main-content"> <h1>GSAP Animation Library Test</h1> <section id="testing"> <p>Lets see what he can do with Tweenlite</p> </section> </section> <!-- main-content ends --> <footer id="page-footer"> </footer> </div> <!-- outer-wrapper ends --> </body> </html> And here is my js: $(document).ready(function() { $("p").click(function (){ var $target = $(this) ; TweenLite.to( $target , 1, {backgroundColor:"#000"} ) ; console.log("clicked"); }) }); All the libraries load. Firebug returns no errors. When I click the <p> element, I get the console message, but nothing else.