Vahid-Designer

Hi Diaco Thank you very much. I've had a problem in my css3 codes. It's solved. The problem was non-related gsap. Thanks for your help.

Hi ro-achterberg I think this demo codepen can help you. And I think GSAP can do anything you want as clip. And actually you can read about details of clip property at this main page that explains how gsap works on css3 properties.

Hi Zach I know how I create a codepen but Actually I couldn't simple it. If I want to rewrite, it will take a long time. I just want to have a pause step in my TimelineMax that when a condition is getting true , animation stops at a label and also if the condition gets true again it stays pause, still. but if another condition happened it can be resumed or reversed.

Hi all. I have a problem with pausing a point of TimeLineMax. I have an animation queue like this: var tl= new TimelineMax({paused:true}); var tm1=tl.set(".circle-f:nth-child(7)", {autoAlpha:0,scale:0,backgroundColor:'#00E5FF'}) .addLabel("mystart") .to(".circle-f:nth-child(7)", 0.3, {autoAlpha:1,scale:0.2,backgroundColor:'#00E5FF'}) .addLabel("mystop") .to(".circle-f:nth-child(7)", 0.3, {scale:1,backgroundColor:'transparent'}) .... The problem is when I want to reverse timeline from "mystop" to "mystart". I do it easily by : if(//for example: scrollTo<=500) tm1.tweenFromTo("mystop", "mystart"); But this animation when will be run that condition above is true. Actually, the animation will be run from mystart to at the beginning point of the timeline when the condition is true. I want to run the animation once, only. So I have to kill that: if(//for example: scrollTo<=500) tm1.tweenFromTo("mystop", "mystart"); tm1.kill(null, ".circle-f"); But it kills all animation of ".circle-f" on other conditions that I don't want to happen it. The question is is there any way by other condition I can turn off the kill or return the animation has been killed. And there is a way to make me don't use of kill? I tried with addPause but I couldn't understand when I use it like this: var tl= new TimelineMax({paused:true}); var tm1=tl.set(".circle-f:nth-child(7)", {autoAlpha:0,scale:0,backgroundColor:'#00E5FF'}) .addPause() .to(".circle-f:nth-child(7)", 0.3, {autoAlpha:1,scale:0.2,backgroundColor:'#00E5FF'}) .addLabel("mystop") .to(".circle-f:nth-child(7)", 0.3, {scale:1,backgroundColor:'transparent'}) .... How can I call it when I am calling its playing? Like this? tm1.play(); tm1.addPause("mystop"); Please let me know and help me if it's possible.

Hello all. I have a container as below: .section-fixed{ position:fixed; width:0px; height:0px; top:-280px; right:-280px; overflow:hidden; -webkit-border-radius:50%; -moz-border-radius:50%; border-radius:50%; background:transparent; opacity:0; z-index:10; } which there is a few items within it: .item-f{ text-decoration:none; top:calc(50% - 15px); left:calc(50% - 15px); position:absolute; border-radius:50%; width:30px; height:30px; text-align:center; color:black; font-size:25px; cursor:pointer; } <section class="section-fixed"> <div class="main-menu-f"> <div id="HomeButton" class="item-f">A</div> I wrote a code with TweenLite as below: if(//some condition){ TweenLite.to('.item-f:nth-child(1)', 0.6, {x:0.98 * -220.56290407832017,y:0.98 * 30.932307155207802,rotation:360,autoAlpha:1,ease:Back.easeOut.config(1.87)}); else{ TweenLite.to(".item-f:nth-child(1)", 0.6, {x:0,y:0,rotation:-360,autoAlpha:0,ease:Back.easeIn}); } The problem is for when if condition is true, unfortunately ease function doesn't work correctly and the element moves in its way, simply. But when the else condition is true, Back.easeIn done correctly. What's going on? Can everybody help me at this?

I'm trying to animate elements in my webpage by using css3 and gsap library. One of my elements which is my menu item has the following code in css3: .loaded .main-menu .item:nth-child(1){ top:calc(50% - 25px); left:calc(50% - 25px); background-color:green; opacity:0; -webkit-animation:moveicon1 1s forwards cubic-bezier(0.42, 0, 0.05, 1.87); -moz-animation:moveicon1 1s forwards cubic-bezier(0.42, 0, 0.05, 1.87); -o-animation:moveicon1 1s forwards cubic-bezier(0.42, 0, 0.05, 1.87); animation:moveicon1 1s forwards cubic-bezier(0.42, 0, 0.05, 1.87); } @keyframes moveicon1{ 100%{-ms-transform:translate(0px,-160px) rotate(360deg); -o-transform:translate(0px,-160px) rotate(360deg); -moz-transform:translate(0px,-160px) rotate(360deg); -webkit-transform:translate(0px,-160px) rotate(360deg); transform:translate(0px,-160px) rotate(360deg); opacity:0.8;} } I've done above for all prefixes. And the other hand I wrote these code via gsap based on following code: TweenLite.to('.loaded .main-menu .item:nth-child(1)', 1, {x:0,z:0,y:-160,rotation:360,opacity:0.8, ease:Back.easeOut}); An idea to use both together is using gsap when css3 is not define in client's browser. But I don't want to do it, because gsap has the very good speed. Unfortunately when I use both on same element, browsers who support css3 doesn't animate good via gsap. if (!Modernizr.cssanimations){ // GSAP Codes } I know that gsap and css3 has the same speed But the question is can I use both together and browser run each one that has more speed. So like when the laptop is in Power Saver mode , run the gsap (because its faster in this situation) and when javascript is off run the css3. If it's not possible, help me to recognize when I should use which one? Javascript or css3? Thanks a lot.

Thanks for replay. But if I wouldn't help of gzip I need 105kb for TweenMax (without CDN) which I can use TweenLite and TimeLineLite wth using CSS Plugin instead. It's size will be 79kb. I can save 27kb by using TweenLite. But if I decided zip it, therefor TweenMax will be 35kb and {TweenLite + TimeLineLite + CSS Plugin} will be 33kb. So it's better to use TweenMax. So if I decided to use zip file I do your advice. Thanks. But at the moment, pointC solved my problem.

Hello everybody. I am using the TweenLite together with TimeLineLite currently and I think that's much easier to use and can replace it instead of css3. But I have many dive that they are circles (border-radius:50%) and they rotate 360 degree infinitely. I have tried do that via gsap using TweenLite but unfortunately it hasn't any predefine method to do this (TweenMax has repeat property which we can assign a large number for it and simulate infinitely). Does anyone any Idea to help me do this via TweenLite ? because of being lightweight and the fact I'm using jQuery I can't use TweenMax anymore, Thanks For Your Helps.