FrancoisH

I weren't able to solve my issue using your .set syntax, so I went another way and used jQuery to set the CSS value directly. $(element).css('background', ('linear-gradient(to top, transparent 48%,' + lineColor.bg + ' 1%, transparent 49%)')); Here's a forked working example : CodePen By the way, if you have any way to draw a line from the left to the right to a set position using Greensock, I would be absolutely delighted. I want to connect some aligned dots with a line coming from the left to the right through them.

Hello, I just started to animate a gradient using colorprops, but I have a little issue. Here's my syntax : var iconAnim = new TimelineMax(); var lineColor = {bg: "rgba(255, 255, 255, 0)"}; iconAnim.to(lineColor, 2, {colorProps:{bg: "rgba(255, 255, 255, 1)"}, onUpdate:colorizeLine, onUpdateParams:["#icones"]}); function colorizeLine(element) { TweenLite.set(element, {background: 'linear-gradient(to top, transparent 48%,' + lineColor.bg + ' 1%, transparent 49%)'}); } This is working one time. The function get called and the correct first step in getting my alpha up is working. I logged to the console the value of lineColor.bg and got correctly all the rgba() value set during the 2 seconds. But despite calling my colorizeLine() function, it's only applied on the first time. Do you have any idea why? Kind regards.

Thanks again It's smoother this way.

I'm still trying to improve the thing. Here's my example : http://www.francoish.net/test/ Feel free if you have any suggestion to improve the whole thing? Thanks. EDIT 1 // Don't look at the little bug on first load, I'll use HTML loader to load the site I think. Or maybe should I hide the logo and use .fromto to achieve the effect... maybe a better solution. EDIT 2 // Solved the previous issue but not really happy with the code. Don't look at the colors, they're just for testing purpose of the rotation. Anyway if you have any suggestion to reduce CSS properties, improve the way I animate things, please feel free to speak. I think I've overdone that a bit

Thank you for answering this. I looked into the search option and I probably made a mistake... I haven't found this post.

Hello there, It's me with another question... I'm using Sublime Text 3 as my default text editor (and can see here I'm not the only one here ). Anyway, I'm unable to get SublimeCodeIntel working with GSAP plugins. Do you have any clue on how I could get it working with it? Auto scanning of the files is not sufficient and only work for jQuery, not GSAP. Maybe it needs a definition file? If you have some suggestion, I would be happy to read it! Kind regards.

I think I found the answer myself but it's not perfectly working as I would. I thought I could animate the container rather than animating both <a> inside it but I was wrong I think... I tried this on codepen : http://codepen.io/anon/pen/azzdea I changed my animation to animate both parts with relative positioning.

Hello there, As a beginner I'm i went into an issue early and I'm still unable to solve it. Maybe can you help me with it. I'm trying to achieve a card flip effect with my navigation bar, here's a small example of what I try to achieve but I'm unable to make this working. It seems to be a z-index related issue. I really hope you can help me achieving this effect. Kind regards. EDIT /// I tried at one point to achieve this effect with 2 menu div with all my buttons one over the second and it was working fine, but I needed to animate both object directly at the same time, which caused a lot of complicated handling of the animation.

I am such a stu... boy! I always put this meta as my friend, who's more versed into CSS3/HTML5 than I am always told me to put this one (I focus more on JavaScript, PHP & SQL for his projects). The suggestion reminded me to put the famous line : <meta name="viewport" content="width=device-width, initial-scale=1.0" /> It solved partially my issue. I think I'll disable this animation on mobile phone because it's laggy and safari doesn't like so much 3D transormation. It's displaying fine on chrome for iOS but not on Safari. Anyway, thank you for the quick and detailed answer.

Hello there, As a new user of your fabulous library, I'm experimenting and I just went into a big issue. On my computer, all is displaying fine but on my iPad and mobile, I've an issue. I'm trying to animate my logo making images coming from the sides to the center of the screen. If on computer the effect is just as I designed it, on the tablet and the mobile phone, the browser resize (scale down) to fit to the new width of the page according to the position of the image on the left (not on the right side). Do i have a way to force browser to keep the page width and not scale down to fit in the logo? Here's a link to the animation: http://francoish.net/test/ Kind regards.