Jump to content

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


  • Content Count

  • Joined

  • Last visited

Community Reputation

8 Newbie

About farhoudz

  • Rank
  • Birthday 02/14/1985

Contact Methods

Profile Information

  • Gender
  • Location
  • Interests
    Web Development Project Management, SEO, Web Graphics, X/HTML and CSS Coding (Including latest HTML5 and CSS3 technologies), Responsive Web Design, Front-End Development, Latest Technologies like WebGL
  1. Thanks a ton PointC, That is exactly what I want, I learn so much from you guys.
  2. Thank you so much guys, Actually I thought about removing yoyo from the timeline but my ideal desire about this animation is that the rectangles draw from the top and then scale down again from the top like the image I shared Here I also tried to achieve this using a master timeline which manages two separate timelines but it was not a success, maybe I missed something simple here. Also thanks a ton PointC for your guidance on the Codepen.
  3. Hi there, Actually I am trying to achieve an animation using morphSVG plugin which is a scroll down indicator, as you can see in this pen which I prepared what happens is that the two SVG rectangles morph from top to bottom and that is fine but what I exactly trying to do is that after this step I want them to morph back again from top to bottom and not from bottom to top! Please advice, PS. I could not add the morphSVG plugin to this pen. Regards.
  4. Thank you Rodrigo for your effort but my case is a little different, I have edited my codepen sample: http://codepen.io/fzolhayat/pen/xGmVqW As you can see it is working alot better now but I still have some problems in some cases: - Case one: Select tab two then tab three and then tab one; Here you can see a conflict between Timelines which results in "firstChanel" left position to be animated correctly but remain at "display: none; and visibility: hidden;" state so from user's point of view nothing happened or something bad happened. - Case two: Directly select tab three and
  5. Dear Ihatetomatoes, Here is exactly what I am trying to do: http://codepen.io/fzolhayat/pen/xGmVqW As you can see there are three tabs which If you click on each one of them it has to animate you to the corresponding .col element and in addition it has to animate the location of .dot element to show you which element you have chosen, I have also used hammer.js in my real project to activate swipe event on mobile devices on each .col element so whether the user clicks on each tab or swipes on each .col element it has to animate to the right element and all of the Timelines has to be
  6. Thank you Ihatetomatoes, I use your technics and read your articles every day and they are awsome, About your solution I have edited my code like this: function fsr() { var firstSwipeRight = new TimelineMax({}) .fromTo(firstChanel, 0.1, { left: 0 }, { left: offset }, "firstSwipe") .fromTo(".dot", 0.1, { right: "26px", scaleX: 1 }, { right: "147px", scaleX: 3 }, "firstSwipe") .to(".dot", 0.2, { scaleX: 1 }) .fromTo(fir
  7. Here I have three Timelines which I play and reverse them in appropriate cases : var firstSwipeRight = new TimelineMax({ paused: true }) .fromTo(firstChanel, 0.1, { left: 0 }, { left: offset }, "firstSwipe") .fromTo(".dot", 0.1, { right: "26px", scaleX: 1 }, { right: "147px", scaleX: 3 }, "firstSwipe") .to(".dot", 0.2, { scaleX: 1 }) .fromTo(firstChanel, 0, { visibility: "visible", display: "block" }, { visibility: "hidden", display: "none" }, "first
  8. What about using this function for multiple Timelines at once? I mean clearing properties that are set with multiple Timelines on multiple targets which some of them are common in all Timelines, Could I do this like this? Because I get an error saying "can not tween a null target" !! function clearProps(scene) { var targets = scene.getChildren(); for (var i = 0; i <= targets.length; i++) { TweenMax.set(targets[i].target.selector, { clearProps: "all" }); } } function clearAllProps() { var timeLines = [firs
  9. Thanks OSUblake It was smart to use the progress method of GSAP but if I play my Timeline for example in iPad landscape mode and as it is finished playing change the orientaion of the screen and then try to reverse the Timeline progress then it just reverses the canvas animation progress and not all the other elements in my Timeline together so all my other elements remain at the finished Timeline progress position and not animate back as I use the reverse method! , Here is my Timeline code: compAnim = new TimelineMax({ onUpdate: drawRipple.bind(ripple) }).set(".post-modal",
  10. Hello dear OSUblake, I have a small question and that is how could I resize the circle on browser resize or orientationchange on tablets for example? Thanks in advance for your time and effort. Farhoud.
  11. Actually I am making a web app which part of it contains a touch swipe action in order to browse between different parts of a section in mobile devices of course, the elements which move after the user swipes will be dynamically added or removed; I have made a static version of this so far but I need to make sure it is capable of being dynamic, I have used hammer js for controlling swipe action and tweenmax js for handling the animation. My problem is that I do not know how to recognize which .chanel element is in sight so I can figure out which is the next one and which is the previous on
  12. Thank you very much OSUblake and thanks for the best support among all javascript libraries ever.
  13. Thank you very much OSUblake, Your solution hast the best performance ever. Regards.
  14. So how would you suggest to snap to a very large scale so the user eye could be tricked? Actually for the first part of your feedback I think I can get the viewport width just before Scaling the circle and after that pass that value in order to be calculated for the Scale value. Regards and thank you for your kind support.