bobdobbs

@alig01: thank you. I've set up swiper and I'm playing with it now. Your advice is appreciated.

I've been asked to to a fairly run-of-the-mill website slider. Every frame will contain an image acommpanied by some descriptive text. One frame will show at a time. I want to impress the client. I figured that I could take one of the popular js slider, and augment every transition with transition effects. So when the js slider calls it's transition function, I'll call GS functions to animation indivual elements. I think that for I'll need to use a slider library that emits events when a transition is triggered. I'm shopping around libraries at the moment myself, but I figured that while do so I might as well ask here: Can anyone recommend a library that has worked well for them, in terms of adding GS effects? Are there any pitfalls I should look out for?

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?

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?

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?

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)" } ) ; }

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.

Thanks guy. Much appreciated.

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") ; } } ) ;

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?

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

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.

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 ) ; } } ) ;

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. }

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.