OSUblake

Hi bluisier If you create your charts in your update function it seems to work. http://codepen.io/osublake/pen/azjvEo

Wow! This actually helps explain a lot. I always wondered why tweening the timeScale in this example worked the way it did. Thanks for clearing this up. I don't remember seeing anything about this in the documentation, although today I looked around, and I found a mention of this on the colorProps plugin page.

Hi bluisier This is clearly a chart.js issue. For some reason it won't work when there is a delay. To prove this, I called your update function outside of GSAP, in a normal setTimeout function. // This will work sometimes setTimeout(function() { updatedoughnuts(); }); // Add a little bit of time, and it won't work setTimeout(function() { updatedoughnuts(); }, 100);

I looked at his site and was thinking, "I hope not", because I can't get the dragging to work in Chrome, and Opera tells me to use Chrome. Anyways, here's a suggestion. Can you add the name of the file to the comment block in the header? This might be helpful for people who do not know how to use the console to inspect the window. Something like... /*! * FILE: TweenMax.js * VERSION: 1.15.1 * DATE: 2015-01-20 * ... **/

Very interesting. I did not know you could use functions. Will this work with overloaded functions, kind of like jQuery uses, 0 arguments = get, 1 argument = set? There you go, IE8 problem solved. One nice thing about using a function for the setter is that you can add return this; and then you can chain your calls together. image1 .setRoundedX(300) .setRoundedY(300); http://codepen.io/osublake/pen/raKoRm

I included the event because that is the default argument when you have no parameters listed. http://codepen.io/osublake/pen/VYddoL Hi ViolaCase, Where does it confusing? I know the disabledClick function might be hard to understand, but do you understand everything up to that point?

Good point. If you are trying to target older browsers like IE8, the second method won't work, or you would have to use something like in Diaco's link. But since support for IE8 has ended, and all the major browsers have implemented ES5, it's pretty widespread.

Hi Mime Artist, You can tween some sort of proxy value, and then call the onUpdate function to set your image to the rounded values. Here's 2 ways I came up with to do this using proxy values. The first involves setting the raw value to some attribute on your element. Pretty straightforward. The second way is based on a question I just answered about using getters / setters to transform values. While not as cut and dry as the first method, I did add an interesting effect. Instead of calling an onUpdate function, I added the set tween to the proxy value. This will allow you to set the x value like this: image.x = 300, and it will actually move to 300. http://codepen.io/osublake/pen/pvKLVG

It has to be numeric, but you can use a getter / setter to transform the value. var myObject = { _left: 100, units: "px", get left() { return Math.round(this._left) + this.units; }, set left(value) { this._left = value; } }; http://codepen.io/osublake/pen/WbyMLE

Hi Creative Tech, You can use units for left, but a you need to define it's position first, i.e. relative, absolute. You were also trying to tween your object left, which isn't an element, so that's why nothing was changing. http://codepen.io/osublake/pen/gbKvGa Or were you trying to tween the numbers? In that case you can always append the units. http://codepen.io/osublake/pen/MYXQrr

Hi Reanimator, Here's how to do this while maintaining your draggable's scope and params. You need to call your onClick function using apply, passing in your params array or the event object wrapped in an array. function onClick(myParam) { // Do something to my draggable } function disabledClick(event) { onClick.apply(myDraggable, myDraggable.vars.onClickParams || [event]); } http://codepen.io/osublake/pen/bNKLVE

For Diaco's punishment, he shall procedurally generate a GSAP animation that displays, "I will not use CSS transitions" 100 times on CodePen. Hi Jonathan, While your solution does work in the context of this demo, it's not really what I was trying to solve. It's alright though. I just realized something very important after reading Carl's response. I'll get back to you guys later...

If you cleared your cache and are still seeing a difference between CodePen and a normal browser window, my best guess would be that Evernote is initializing and parsing the page which is causing a delay. Because CodePen runs in a frame, you won't see a delay like you do with a hard refresh. Try adding a delay and a repeat to your animation to see if the problem still persists after some time has passed.

Hi Mandoo, I noticed that you are using a different version of GSAP on your server than you are on CodePen. On your server you are using version 1.14.2 and on CodePen you are using the latest, which is 1.15.1. Try updating to a newer version. <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.15.1/TweenMax.min.js"></script> // Or for the latest... <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>

Hi mandooraj Right off the bat I don't see anything odd, but it's easier to figure out what's going on if you can make a CodePen. So how did you narrow it down to Evernote? I always have the extenstion running in Chrome alongisde the desktop version, so they're always syncing, and have never experienced any problems that I could blame on Evernote. Here's some scrollTo demos you can test out. You can also use the Up/Down arrows to scroll, and the Control button to speed up the second demo. http://codepen.io/osublake/pen/emEajW http://codepen.io/osublake/full/myMNNL/

Yeah, it works. But you're right, it's a little dirty. I just played around with some of the times, and it got out of sync real quick. Plus, I think it's venturing too much into CSS territory. I'd rather not have the user add !important or define their CSS like .class1.class2 { ...}. I'd just like to tween everything to the values in some arbitrary class. I guess for the time being I'll just do it manually.

So close! The height will change, but it's not animating.

Hi Nan Say, onComplete is being called when you create your timeline and not when the animation is actually completed. You need to add a reference to your function without the parentheses. var tl = new TimelineLite(); tl.to(".box", 2, { x: 500, onComplete: start }); function start() { tl.restart(); } http://codepen.io/osublake/pen/jExzJg

Is there a way to override properties set by GSAP when tweening a className? Here's a demo where I initially set my boxes to a height of 50. I then tween them to a class that has a height of 150, but the height won't change unless I use clearProps. However, I really don't want to clear any props and you can't animate the clearing of props.

It's gotta be a bug somewhere, but I tend to stay away from using display: none because it messes with the page structure. Have you tried other ways of switching out content, like using autoAlpha?

Maybe you could restructure your animation or your elements? I don't know if this might be any help to you, but I created a similar animation for this discussion. It's uses Angular, but you might be able extract some of what's going on. Basically each element has its own animation, instead of using a master timeline to control everything. http://plnkr.co/edit/cXBEwU?p=preview

This seems kind of hackish, but I added a fromTo tween with a tiny duration and the problem seems to go away. Try this out. http://plnkr.co/edit/ZUI7HSfgjoAe5T6RHYFb?p=preview Perhaps somebody else knows what's going on here, because I'm lost.

Oh, I see it now... FireFox

Hi d@ve, I can't replicate the problem. Are you only seeing this on CodePen? Does it appear on these sites? Plunker: http://plnkr.co/edit/ZUI7HSfgjoAe5T6RHYFb?p=preview JS Bin: http://jsbin.com/jonuli/1/edit?html,css,js,output

Hi Gani, Staggered tweens are supposed to have the same destination values, but you are trying to create unique ones. If you need unique values, you can stagger the delay for each tween or its timeline position. $(".box").each(function(i, box){ var $box = $(box); TweenLite.to($box, 1, {left: $box.position().left, top: $box.position().top, delay: i * 0.2 }); }); http://codepen.io/osublake/pen/myLdVB