Jump to content
Search Community

Vincentccw

Members

  • Posts

    55

  • Joined

  • Last visited

 Content Type 

Everything posted by Vincentccw

1
2
3
Page 1 of 3  
  1. Vincentccw
    Thanks, that does the trick
  2. Vincentccw
    Hi, I know how to call a function when a timeline animation is complete, but what if I want to call it in the middle of the animation? I want to call the displayContent() after the height=0 animation is called, how should I do that? var $outerBox = $selectedTab.parent('.standard-width'); var animate = new TimelineLite({ paused:true //onComplete:myFunction, //onCompleteParams:["param1"] }); animate.to($outerBox , .4, {height:0,opacity:0,ease:Power2.easeInOut}) .to($outerBox , .4, {height:100,opacity:1,ease:Power1.easeIn}) animate.play(); function displayContent(){ $selectedTab.css({display:'block'});// display selected tab }
  3. Vincentccw
    I'm trying to create a simple animation with a trigger button using TimelineLite(), but some how I got stuck... Here is my pen: http://codepen.io/vincentccw/pen/bfojB?editors=101 I can trigger the animation when I hover over the red square but not the button itself (since the animation is store inside the square instead of the button) Thanks for the help in advance
  4. Vincentccw
    How do I set animation delay to using timelineLine? I have an animation that store inside slideUpTemplate instance /*========================================*/ var slideUpTemplate = new TimelineLite({ paused:true, onComplete:animationComplete, onReverseComplete:animationCompleteRev }); /*========================================*/ I've an button that will hover in and out event attached to it, and call slideUpTemplate.play() and slideUpTemplate.reverse() respectively. My problem is when I hover out I want the animation to delay for 1second before triggering the slideUpTemplate.reverse() method. My initial thought was to use slideUpTemplate.delay(1).reverse() but it only works for the 1st time.....
  5. Vincentccw
    Thanks for the solution, however I'm trying to animate the button individually. If I use your method, I don't think I can workaround it here is the revised pen: http://codepen.io/vincentccw/pen/aiBjy/?editors=101
  6. Vincentccw
    Just a quick question, I've created a simple list menu, when I click the "click here" text it is suppose to make all the child list to animate from left to right. However I get Uncaught TypeError: Cannot call method 'play' of undefined Here is my pen: http://codepen.io/vincentccw/pen/dCpok/?editors=111 Thanks for the help.
  7. Vincentccw
    Thanks, will take a look
  8. Vincentccw
    Thanks for the help, yes I will redirect the question to their official GitHub page
  9. Vincentccw
    Is it possible to use a Superscrollorama object to control multiple timelines? My code: http://codepen.io/vincentccw/pen/AwIbx/?editors=111 RIght now the box1 class is animating as intended, but I'm only allowed to animate one box at a time, if I add another timeline below it, the whole animation stop working. Is there a better way to add multiple animation timelines or do I need to create multiple scrollorama object to hold individual timeline>
  10. Vincentccw
    Thanks will try that out too~~
  11. Vincentccw
    Thank you for such detail explanation, i really helps me a lot
  12. Vincentccw
    Thanks again rhernando, the code works perfectly. I know this is a bit off topic since i'm asking more juery oriented question here, but can you explain the extra code in ur pen: if($('li.active')[0] && $("li.active")[0] != this) { $('li.active')[0].animation.reverse(); $('li.active').removeClass("active"); } the animation.reverse will only work with $('li.active')[0].animation.reverse(); or this.animation.reverse(); but not something like $('li.active').animation.reverse(); or $('li').animation.reverse(); .....it gives me error and says animation/ reverse are udefined.Why can't I just apply the animation to other selector?
  13. Vincentccw
    I got the code snippet from rhernando last time, I've modified the code to make it respond to click instead of hover, now my problem is since each animation is created separately using Jquery each and greensock animation, how should I control all of them at once instead of controlling one only using "this.animation.play()/reverse();" http://codepen.io/vincentccw/pen/BrALe The reason is because if you look into my pen, I want all the buttons to reset to its original state before I click on a new one (that means only one button will be activated at the time.)
  14. Vincentccw
    Working now thanks =)
  15. Vincentccw
    I'm using timelineLite and would like to check for the state of animation using .isActive, but I got an error Uncaught TypeError: Object [object Object] has no method 'isActive' var tl= new TimelineLite({paused:true}); if(tl.isActive()){ //my code }\ Thanks for the help
  16. Vincentccw
    I never thought it would be possible, thanks for the help so far, really appreciate it!
  17. Vincentccw
    Thanks onCompleteParams seem to solve the problem,but the problem I mention in the beginning seem to occur again, that is when you hover in and out very quickly for few times and stop inside the div, the "mouseenter" stop working... I guess that's limitation of the plugin lol...
  18. Vincentccw
    Thanks for the explanation, unfortunately I need my function to be outside the hovers.... I also notice that I want I want the "toGreen" class to be added after the marginTop:100 animation complete, but I cant seem to do it in my case I have updated my code here: http://codepen.io/vincentccw/pen/LJiso
  19. Vincentccw
    Hmmm I just realize when view in chrome it works but not in firefox, thanks for the solution that is exactyly what I mean, Apart from putting using $this on both the hover in and out and placing both function outside the hovers, I saw that you use turnGreen($this) and revert($this)...Why do you need call the function again? Aren't the callback functions already done the job?
  20. Vincentccw
    I not sure this is the right way to do it or not, basically what I want to do is when hover over the div, the paragraph will move down and the title will turn green with class added to it. then when hover out the exact reverse will occur. My problem now is that when I hover over and out multiple times swiftly and land my cursor within the div, the mouseenter animation will not trigger, but when I move my cursor out again and move back in then it will back to normal... What seem to be the problem actually? Here is my code: http://codepen.io/vincentccw/pen/rpIgD
  21. Vincentccw
    Yes I've tried that and works fine =)
  22. Vincentccw
    T Thanks I get it now
  23. Vincentccw
    Hi thanks for the reply I have updated my code but still doesnt seem to work, the class name doesnt seem to add into the div http://codepen.io/vincentccw/pen/yeqzD http://codepen.io/vincentccw/full/yeqzD
  24. Vincentccw
    From my code the red cube div suppose to animate its height to 0 first before adding the new div class. but right now the problem is that both of them seem to trigger at the same time. I have tried using callback function but still doesnt work. How do you ensure the animation is complete before adding the class? Here is my code: http://codepen.io/vincentccw/pen/yeqzD
  25. Vincentccw
    Thank you for the detail explanations
1
2
3
Page 1 of 3  
×
×
  • Create New...