Sophia

Hello all, In my project, there will be many gsap timelines for different elements, and I will call them at different times. For these timelines will be used for many times, I want to save them in a global variables instead of calculated them each time. But it works with an unexpected behavior. It just run to the end state of the timeline directly without any animations. Does the timeline will be destoryed after animating each time?Any help very much appreciated! Just like the simple code below: var Timelines = {}; function getTimeline(_element, _props){ var tl = new TimelineMax({paused:true}); tl.to(_element, 1, _props, 0); Timelines[elementId] = tl; } $(el).click(function(){ var tl = Timelines[elId]; if(!tl){ tl = getTimeline(el, _elProps); } tl.play(); }) Looking forward to your reply. Thank you very much.

I have tried this preview version, and the border works well. It's so exciting for me! But the 'x' still seems to animate with a wrong value.While I set '5rem' to both of 'x' and 'top', the box moves less in the horizontal direction.

Hi Jonathan, Thank you for your reply, I try to set the 'font-size:62.5%' or 'font-size:16px' in the example, but it doesn't work well. And this unexpected behavior only happens on some of the properties like 'border', 'x' and 'box-shadow', while the other properties, such as width, height, top and left, are all works. I have updated my example, and I set '5rem' to both 'top' and 'x', but the box moves less in the horizontal direction. And the border changes from a very big value to '2rem', not from '1rem' as I set in css.

Hello all, In my new project, I am trying to make animations with rem units, but I have encountered a problem. I code an example on codepen.io:http://codepen.io/Sophia-xueer/pen/jqewJN?editors=1111 In this case, the 'width' animates normally, but the 'border' has an unexpected behavior, which changes from a very big value, not the value of css. I found if I use px units or set the start values before tweening, it worked. But it's a bit complicated when I make some complex animation. Is this a minor bug? And whether it will be fixed in the next version ? Any help very much appreciated! Looking forward to your reply.

Thank you! I'm really looking forward to the new version, and hoping the gsap will be better and better.

Hello all, I found that there is a minor bug of borderRadius in the version of 1.18.3. I want to make a animation like this below: var timeline = TweenMax.fromTo('#grayscale img', 10, {borderRadius:16},{borderRadius:0}); The borderRadius will changed from 160 to 0, not 16 to 0. But it works well in the version of 1.18.2. However, if I add the unit of 'px' , it works right. var timeline = TweenMax.fromTo('#grayscale img', 10, {borderRadius:'16px'},{borderRadius:'0px'}); Is it a minor bug or an update in the new version that every number should set with a unit ? Thank you so much.

Thank you, Jack. I found that the transition of 'hue-rotate' doesn't work either, will this also be fixed in 1.18.4? And may can I ask when you will release 1.18.4? Best wishes to you and your team!

Thank you all for replying me so patiently, Rodrigo and Carl. That really help me a lot. I have been using gsap for about a month in my new project, and I really love it and your team. You are so nice. I tried the demo:http://codepen.io/Gr...Jp?editors=0010, but I found that the transition of blur doesn't work ,it just changed instantaneous. var timeline = TweenMax.fromTo('#grayscale img', 2, {webkitFilter:"blur(0) saturate(0) hue-rotate(0deg) brightness(0) contrast(0) grayscale(1)", filter:"blur(0) saturate(0) hue-rotate(0deg) brightness(0) contrast(0) grayscale(1)" }, {webkitFilter:"blur(5px) saturate(1) hue-rotate(90deg) brightness(1) contrast(1) grayscale(0)", filter:"blur(5px) saturate(1) hue-rotate(90deg) brightness(1) contrast(1) grayscale(0)"}); Should I handle the filter of blur individually ?

Hello all, I have encoutered two problems with gsap. The first one is that I want to make a filter animation with gsap, in which I may modify several css filter properties at the same time. -webkit-filter:saturate(1) hue-rotate(0deg) brightness(1) contrast(1)) grayscale(0.5) How can I set these filter properties in gsap timelineLite? Expecting the similiar way like transform: timelineLite.to(element,{x:100,scaleX:2,rotation:30}) And How can I get these filter properties in separately in progress ? Expecting the similiar way like transform: element._gsTransform.rotation The second one is that how does gsap perform in mobile device with dozens of elements animating at the same time,maybe 30 or 40, and each element animation many have several tweens. Under this situation,which will perform better, css animation or gsap? Any help very much appreciated! I'm looking forward to your reply, thank you very much.

Thank you all for your help , Carl, Point C and Petr. I'm so moved that you help me patiently and give me a lot of nice advices.It really works. As you said, it may costs some time for me to break the "css mindset".I'm trying now. The GSAP animation really gives me a new cognition of web animation. I really love it and enjoy the journey. Thank you again. Best wish to you and your team!

Hi Petr, I create a simple CodePen, and write my problems in the code notes. Here is the code:http://codepen.io/Sophia-xueer/pen/ONxvPz/ Thanks so much for your help.

Oh, Petr, thank you very much ,you are so nice! Your answers help me a lot, and let me learn more about gsap. The solutions have solved my problems perfectly! Now, I am facing a new problem. For example, if I want to make a animation like this below: The left is not changed at the frame of 25% and 50%, but it really start animating from 0 to 200 at the beginning. .box{ position: absolute; top:0px; left:0px; width: 100px; height: 100px; animation:anim 4s both ease-in-out; } @keyframes anim{ 0%{ top:0; left: 0; } 25%{ width: 200px; } 50%{ top:150px; } 100%{ top:200px; left: 200px;width:50px } } I want to create it with gsap, so I write code below： var tl = new TimelineLite(); tl .to(box1, 1, { width: 200 }) .to(box1, 2, { top: 150 }) .to(box1, 2, { top:200, left:200, width: 50 }) But in this way, the left and width doesn't animating like css3,the left only animate at the third Tween and the width animate at the first one and the third one.So I must set individual Tweens for the left and width properties like this: tl .to(box1, 1, { width: 200 }) .to(box1, 3, { width: 50 }) .to(box1, 2, { top: 150 },0) .to(box1, 2, { top: 200 },2) .to(box1, 4, { left:200 },0) Is there any available way to set the frames just like css,in which if a property is not changed in one of the frames it also can have a smooth animation .I think it will be a tough work if there are many properties in an animation in which the properties may not be set in the intermediate frames. I need set many individual Tweens for these properties. My English is not very well, I hope the code can help me illustrate my question. Thank you again from your help！

Hello all I want to create a animation like CSS3 keyframe animation with GSAP, but I have encountered some problems. The first is how to set keyframes, see the below css code: .element{ animation: ball 2s ease-in-out } @keyframes ball{ 25%{ background:red; } 50%{ background:yellow; } 75%{ background:green; } 100%{ background:black; } } //or a more complex one .Shake { animation: Shake 3s ease 0s forwards; } @keyframes Shake { 0%, 100% {transform: translateX(0);} 10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);} 20%, 40%, 60%, 80% {transform: translateX(10px);} } I use TimelineLite.to() with accurate time setting to create a similar animation: var timeline = new TimelineLite(); timeline .to(element, 0.5s, {backgroundColor:red}) .to(element, 0.5s, {backgroundColor:yellow}, 0.5) .to(element, 0.5s, {backgroundColor:green}, 1) .to(element, 0.5s, {backgroundColor:black}, 1.5) Is there any better way to create such a animation? And the second problem is how to set a type of ease to the whole timelineLite, not just to one of the tweens? For example, in css, 'ease-in-out' is applied to the whole animation, not just between two of the keyframes. .element{ animation: ball 2s ease-in-out } But in gsap, it just works on one of the tweens , not the whole timeline. var timeline = new TimelineLite(); timeline .to(element, 0.5s, {backgroundColor:red,ease: Back.easeOut}) .to(element, 0.5s, {backgroundColor:yellow,ease: Back.easeOut}, 0.5); Any help very much appreciated!

Thank you all for your help , blake, Point C and Diaco. You are all so friendly and professional. Your advice helps me a lot. I think the solution can solve my problem perfectly.

Hi Diaco, That's really a good way to pick value between 2(css) values using TweenLite. But I want to know if there is any more simpler way to get value at some point in the progress of TimelineLite. Because TimelineLite is a container for tweens and other timelines, which manages the sequence and timing, some values(css) may not start changing at the beginning,especially when I want to do some animation seem like the keyframes in css3 animation. For example , see the below pseudo code: var tl = new TimelineLite(); tl.to(element, 1, {left:100}) .to(element, 1, {top:50}) .to(element, 1, {opacity:0,top 0}) .to(logo,1, {x:50}), .to(logo,1, {x:0}) I want to get accurate css changed values of 'logo' and 'element' when the timeline progress is at 75%, include the values of left,top,opacity and x. For my new project is developed with React, I want to get the accurate styles data of variable css styles at some point in the progress to render the virtual DOM. Thanks for your advice, much appreciated. I'm sincerely looking forward to your reply.