robbue

Thanks for the answer, and good to here that you are on top of it - as always

Question: Will the new will-change property have any effect/changes on GSAP? Or is this something the library handles already and will only affect CSS animations?

Everything You Need to Know About the CSS will-change Property

http://dev.opera.com/articles/css-will-change-property/

Great stuff guys, as always

Went for the Bezier-version, because I don't like extra DOM element:

See the Pen lIkof by robbue (@robbue) on CodePen

Have to read more on bezier paths, can't really wrap my head around it yet

I'm trying to replicate this CSS pen with GSAP:

See the Pen orLhG by robbue (@robbue) on CodePen

Any suggestions?

Thanks jamiejefferson The class was a CSS animation, but I'm now animating it with GSAP and it works fine. Also experienced some cracks at some resolutions, fixed it with a width: 101% hack and some other stuff.

Updated the post with image for future reference.

I'm making this thing:

See the Pen 645dff0dd2be4811590671525e340493 by robbue (@robbue) on CodePen

But I'm having some problems with the tweens not being completed, resulting in this (MBP Retina Chrome 34):

Why isn't every tween completed? It's stops before reaching a value of 1/0. Is there a better way to do this?

Just want to make a reference to this pen that does exactly what I initially wanted:

See the Pen lykFn by jamiejefferson (@jamiejefferson) on CodePen

I'm making a 360° slider, or actually its more like a 160° slider:

See the Pen 3012fd643e4724963c00cde7975f09a9 by robbue (@robbue) on CodePen

It's supposed to animate back to head-on-image on dragend (hammer.js is used for gestures), not only snap. How could I fix this? 

I would like some feedback to make it better because it isn't 100% smooth, and is this something Draggable & ThrowPropsPlugin could be used to, if so, how? Would be cool to have it draggable freely around with bounds limit.

Why dont I use a plugin like 360slider?

Where is the fun in that? On a more serious note - I may be falling back to a plugin (do you know of any good ones?), but it would be nice to use the power of GSAP to make it.

Why seperate images and not a sprite?

Because the final code will have a lot more frames and mobile devices doesn't support to big images.

Perfecto!

onCompleteParams: ["{self}"], 

When a staggerTo is complete for a object, I want to do something with that object.

Something like this:

onComplete: function(obj) {
      obj.removeClass('blue');
}

See the Pen 178473f51886095f8541a1ce37f446ee by robbue (@robbue) on CodePen

This does the trick, but is it possible to do it with staggerTo?

See the Pen 43750f400ad119d1fa107843900c736e by robbue (@robbue) on CodePen

Much appreciated, Carl!

See the Pen b4b4f3dbcaca0ae6f8a6f97bfa5ac562 by robbue (@robbue) on CodePen

invalid onCompleteAll tween value: function allComplete() { console.log('all complete'); } 

I want a function to run when all the tweens is finished. What am I doing wrong?

Must have been something else wrong in my original timeline setup (not the pen), because as you're saying: it works. And I didn't know CodePen was broken in IE8.

Sorry for the inconvenience!

Yes, I know - IE8 is terrible, but clients...

Having a problem in IE8 with staggerTo and staggerToFrom:

See the Pen ec43f0a3af5eff198df7f0bdd72edd1e by robbue (@robbue) on CodePen

Also having a problem with child elements.

.to('#nav li', 2, { opacity: 0 });

.to('#nav', 2, { opacity: 0 });

Version: 1.9.8 (jQuery is also included)

No need, I just added it in CSS

I found a bug in IE8. In a modern browser this works, but not in IE8:

http://jsfiddle.net/robbue/9E3e8/

I know these properties isn't needed for this particular example, but its just to show that IE8 chokes on it. There may be other properties IE8 also chokes on.

This one works in IE8:

http://jsfiddle.net/robbue/9E3e8/9/

Code version: http://cdnjs.cloudflare.com/ajax/libs/gsap/1.9.6/TweenMax.min.js

Upgrading from 1.9.3 to 1.9.5 seems to fix it.

http://cdnjs.cloudflare.com/ajax/libs/gsap/1.9.3/TweenMax.min.js (previously used this)

Anyone experienced this bug before? Screen freezes (0:10 in video), and nothing happens before I drag (nothing happens on touch) the screen

And it only happens when I click on a link on the website to go to the page. If I refresh it works, every time. It also works (every time) if I go to the same page as I'm viewing. I dont know if its GSAP that is the cause, but it only happens on pages where I use TweenMax. Testet on iPhone 4S (iOS 6.1.2) and iOS simulator.

Edit: Upgrading from 1.9.3 to 1.9.5 seems to fix it.

Thanks for helping me!

I don't know if I am understanding exactly what the desired behavior is, but I'm assuming that once you click on a chapter's circle you want to jump to the appropriate label in the timeline and have it stop.

Once I clicked it I want it to jump to the appropriate label and then start playing from that label.

Also, I noticed you were creating individual tweens to adjust the length of the progress bar to match the amount of delay/time between the labels. Just want to point out that you can have that animation be part of the timeline and then you won't have to manually be changing the width of the progress bar.

Thanks for the tip! I'll make the changes.

Also I want to point out that instead of using callbacks to change the text content of your elements you can use the TextPlugin. This will enable you to have the text-changes be part of your timeline.

I will have a look at it, I will also do some animation with the background image, so I'll need to take a closer look at it.

Thanks again for helping optimize the code, really appreciate it! Please let me know if there is more I could optimize. I want to make a more structured code, object-oriented I guess, but need to learn it first

Hi!

I have a timeline with labels/chapters. It plays and a callback is executed on every label, but the problem I'm having is to make the labels clickable, so you could jump to a certain label. It's hard to explain, so I made a jsfiddle:

http://jsfiddle.net/robbue/56jW6/

When you click on a chapter the timeline jumps to the label, but the timeline is played correct after that.

The labels and callback is added at line 136 and 137.

Code for jumping to a label (not working correctly) is on 156, 157 and 159

I have tried several thing without luck: currentLabel(chapter), pause(chapter, false), seek(chapter, false);

How could I solve this?

Thanks for answering!

I was testing the files on codepen through browserstack.com.

I have successfully tested with the updated files on IE8 (both Windows XP and Windows 7). Resolved!

Updated test:

See the Pen brxCE by anon (@anon) on CodePen

Hi!

clip() is supported in IE8, but why isent it supported in GSAP?

http://www.w3schools.com/css/tryit.asp?filename=trycss_clip (works in IE8)

Could I create and fallback for IE8 so the images here could have a fade transition on mouseover instead of clip?

See the Pen JxpGL by anon (@anon) on CodePen

Hi!

Any suggestion how I could add a fallback for 3D transforms in IE 9 (and other browsers):

TweenMax.to('#box', 0.5, {rotationY: 50, opacity: 0.2, transformOrigin:"0 50%"});