garyw

Okay, it seems to be working now in CodePen. It seemed to fail when part of the draggable box was below the bottom of the scrollable viewport. However, it still doesn't work in my own app (which has a lot of complex code). I am getting calls to onDrag as I drag, but within the onDrag callback, "this.x" is always 0.

This didn't work, either.

Funny, using type='y' doesn't have any problem.

I am using an HP Envy 15 Touch.

This one still fails.

I am using a Windows 8.1 hybrid device and IE 11. If I create a Draggable with type:'x', it doesn't work. I created a CodePen to demonstrate this. I have to touch and drag about 3 times before it works. It works fine with a mouse.

We are seeing some strange artifacts when animating an object. We have a small image that we bob up and down using TimelineMax. Here's the code: this.tabButtonTimeline = new TimelineMax({repeat:-1, delay:1, repeatDelay:0.5}); this.tabButtonTimeline.to(this.tabButton, 0.1, {y:-4}).to(this.tabButton, 0.2, {y:0, ease:Power1.easeOut}); On an iPad, while this small button is animating, a block of text elsewhere on the screen has a slight distortion that changes in time with the animation. It looks like half of each line of text shifts up and down a pixel. On IE, our client is observing an "x" symbol that appears and disappears in time with the animation. We are unabel to reproduce this one, but our client has shown us a video of it. Could this be the result of force3D? Would turning it off eliminate these issues?

Is there a way to use TweenMax to repeatedly toggle a property between two values without tweening intermediate values? Let's say I want to continuously toggle an img tag, used as a sprite sheet, between top:0% and top:-100%? I've achieved this by using delayedCall, but it's cumbersome and requires three separate functions.

I am using TimelineMax to make an img tag appear to hover up and down. It randomly moves the y of the image up and down relative to its current position, like this: var DURATION = 2; var tl = new TimelineMax({paused:true, repeat:-1, repeatDelay:1 + DURATION * Math.random()}); tl.to(this.car1, DURATION, { y: '+=7', force3D:true }). to(this.car1, DURATION, { y: '-=7', force3D:true}, '+=' + (1 + DURATION * Math.random()) ). to(this.car1, DURATION, { y: '-=7', force3D:true}, '+=' + (1 + DURATION * Math.random()) ). to(this.car1, DURATION, { y: '+=7', force3D:true}, '+=' + (1 + DURATION * Math.random()) ). invalidate(). play(); At various other times, my project explicitly moves the img to a new y position. To do this, it kills the hover timeline, calls TweenMax.to(), then re-executes the above code to restart the hovering. Most of the time, everything works great. Sometimes, though, the hovering starts acting wonky. The img jumps to a different position, rather than moving smoothly. I think it's due to the relative tweens above getting confused. I've tried killing all tweens before executing this code, and as you can see, I have also tried using invalidate(). My first question is what am I overlooking that could cause this timeline code to misbehave? My second question is, should I replace the relative tweens with explicit y positions? And if so, how do I determine the current y position of the img? [Addendum] I came up with a way to calculate the current y position: var r = this.car1.getBoundingClientRect(); var currentY = Math.round(r.top); var DURATION = 2; var tl = new TimelineMax({paused:true, repeat:-1, repeatDelay:1 + DURATION * Math.random()}); tl.to(this.car1, DURATION, { y:currentY + 7, force3D:true }). to(this.car1, DURATION, { y: currentY, force3D:true}, '+=' + (1 + DURATION * Math.random()) ). to(this.car1, DURATION, { y: currentY - 7, force3D:true}, '+=' + (1 + DURATION * Math.random()) ). to(this.car1, DURATION, { y: currentY, force3D:true}, '+=' + (1 + DURATION * Math.random()) ). invalidate(). play(); Unfortunately, this doesn't solve the problem. The img seems to hover correctly through one cycle, then starts sporadically jumping to different positions.

What you need to do is to create a container div with overflow:hidden. Each of your spinners should be an img tag within the container div. I suggest that the image file contain two copies of the spinner image, one on top of the other. Position the img so that the second, bottom copy is visible. Then simply tween the img down until the top copy is visible and use the repeat parameter to do it as many times as you want.

The way I get this information is to add it as a numeric property of the object being tweened: myObj.myRotation = 0; TweenMax(myObj, 1, {rotation:80, myRotation:80}); Then at any time, I can simply look at myObj.myRotation.

Every little detail, including but not limited to: - Is it a property of TweenMax or CSSPlugin? - What exactly are its effects and side effects? - What is its default value? - When would I want to enable it or disable it?

I am unable to find it in the API documentation. Thanks.

I realize this is an old topic. I just ran across this interesting library that adds some control to animate.css: http://labs.bigroomstudios.com/libraries/animo-js

When I use this, the tween functions as expected: TweenMax.to('#myElement', 0.6, {left:400}); The following, however, has no effect: TweenMax.to('#myElement', 0.6, {transformOrigin:'left top', x:400}); This is true in Google Chrome and iPad Safari. Any ideas?

You got to the crux of the problem... we need to have a cross-fade between the last and first items, so that it is a seamless infinite loop. Technically, the outgoing image doesn't need to tween at all... if it's behind the oncoming image, the outgoing image can just pop off once the oncoming image fades on over it. Because of z-index issues, though, the cross-fade may be necessary,

Hmm.. I only see the glitch in Chrome 21. Here's the routine I set up: var cycleImages = function(selector, duration) { var $images = $(selector); if ($images.length == 0) return; this.timeline = new TimelineMax({repeat:-1, repeatDelay:duration}); this.timeline.append(TweenMax.staggerTo($images, 0.5, {css:{autoAlpha:1}, repeat:1, yoyo:true, repeatDelay:duration}, 0.5 + duration)); this.timeline.play(); };

This doesn't work. There's still a glitch at the end of each cycle where the first image appears immediately after the last one.

We're trying to use TimelineLite to create a cycle of images. We want to show one image at a time, fade between them, and at the end, cycle back to the first one and repeat. We are getting various results on different browsers. On some, it works fine. On others (*cough* IE8 *cough*), we occasionally see a cut between images instead of a fade. Other times, the wrong image appears. Our images are set up absolutely positioned at the top left in a <div>; the first image is visible immediately; the rest are styled as visibility:hidden. What's the best algorithm for doing this using GSAP, given an arbitrary number of <img> tags (we're using jQuery, too)? We've tried a couple of ways, but the code for such a seemingly simple task gets complex quickly.

Let's say I have a bunch of external SWFs that I need to load. They each refer to a shared library SWF. I don't want to load all the external SWFs right away, because they are too big to all be in memory at once and they are played sequentially. So I load each SWF as needed. I'm thinking I need to do the load one of two ways: 1. Use LoaderMax to load the next SWF plus the shared library SWF each time. 2. Keep track myself of whether the shared library SWF has been loaded already and don't load it again. I only want to load the shared library SWF once in order to get it into the browser's cache, then release it from memory. Option 1 is obviously simpler to program, but I'm wondering what will happen if the shared library SWF is already cached. If I load it each time with LoaderMax (with a new SWFLoader each time, since I would have released it from memory from any previous load) and the shared library SWF is in the browser cache, won't that result in a big jump in the progress?

Is there any advantage to using XMLLoader over the standard AS3 URLLoader for XML that doesn't contain any LoaderMax elements?

I am dynamically determining a series of SWFs to load, and I need to figure out if I should re-use or destroy the loader each time. When using SWFLoader: 1. Once a SWF has completed loading and I have added loader.content to another parent, do I need to keep the instance of SWFLoader? 2. Can I start loading a new SWF with the same loader instance without affecting the previously loaded SWF? 3. Can I call loader.dispose() without affecting the loaded SWF? Or should I just set loader = null? 4. Or should I create and keep an instance of SWFLoader for each SWF so I can use them to dispose of everything when I am done? 5. is there any reason I should use LoaderMax instead of SWFLoader?