Jump to content

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


  • Content Count

  • Joined

  • Last visited

Community Reputation

0 Newbie

About Vahid-Designer

  • Rank

Recent Profile Visitors

1,689 profile views
  1. 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.
  2. 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.
  3. 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.
  4. 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("myst
  5. 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="HomeButt
  6. 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%{-m
  7. 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.
  8. 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 anym