Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


  • Content Count

  • Joined

  • Last visited

Community Reputation

10 Newbie

About Sophia

  • Rank
  1. 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 Timel
  2. 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.
  3. 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.
  4. 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
  5. Thank you! I'm really looking forward to the new version, and hoping the gsap will be better and better.
  6. 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
  7. 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!
  8. 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-
  9. 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 sec
  10. 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!
  11. 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.
  12. 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;
  13. 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% {
  14. 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.
  15. 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(e