Vincentccw
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Everything posted by Vincentccw
-
Thanks now it works perfectly, but sorry to bother you again, I still have some doubts though hope you can help me with this. from the snippets, why at the end of "each" function, why did he use this? element.animation = tl; what does it mean actually? Since it is already in the tl variable why cant he reuse the tl variable instead create a variable call animation? and also when hover, why is "this" need to be introduce before animation? this.animation.play(); this.animation.reverse(); Thanks again
-
Thanks now it works perfectly, but sorry to bother you again, I still have some doubts though hope you can help me with this. from the snippets, why at the end of "each" function, why did he use this? element.animation = tl; what does it mean actually? Since it is already in the tl variable why cant he reuse the tl variable instead create a variable call animation? and also when hover, why is "this" need to be introduce before animation? this.animation.play(); this.animation.reverse();
-
Thanks for the solutions, but now I've come across another problem, what if the element I'm targeting is the child of the div? ie I want to animate the paragraph element when I mouseenter/mouseout the div? http://codepen.io/vincentccw/pen/IKxye Thanks for the help again, really appreciate it.
-
Hi Rhernando, Thanks for the solution, but is it possible to implement this solution into my code instead of using the snippet? For some reasons I have to used .on with mouseenter and mouseleave function. Thanks for the head up by the way
-
How do you clear a timeline every time you perform a mouseover and mouseout function? Here is my code: http://codepen.io/vincentccw/pen/paslB My problem now is that the animation will build up within the variable and causing some weird behaviours when I perform more than one hover....
-
Thanks for the detail explanations, I understand it now
-
Thanks a lot, I think I should stick with TweenLite and TweenMax instead of timeline for simplicity sake
-
Thanks for the solution, I like your pattern though, I've tried it and the animation is much smoother than using my original code. but I have one question does it only apply to tweenLite only? will it work on TimelineMax? I tried replace to TimelineMax.to but it doesnt seem to work...
-
Thanks I have try your method and it works fine, but just wondering why is delegated event anyway better than direct event? Just curious
-
Thanks, I have fixed the problems
-
Thanks for the detail explanation, it really works
-
How do you clear animation cache? When you hover over and our the elements few times you can see the animation continuing even if the function is not being call. In jquery, I use: e.g. $(this).stop().animate({opacity: 0}, 500); but how about in GSAP?
-
http://codepen.io/vincentccw/pen/svBte This is the code I'm using: /////////////////////////////////////////////////////////////////////////////////////// var hoverEffect = new TimelineMax(); $('div').on('mouseenter', function(){ hoverEffect.to($(this), .2, {top:"-=20px",ease:Quad.easeIn}); }).mouseleave(function(){ hoverEffect.to($(this), .2, {top:"+=20px",ease:Quad.easeOut}); }); /////////////////////////////////////////////////////////////////////////////////////// On first hover, the div straight away jump into the end and skip the animation but when hover the second and third time, it goes back to normal.... I also noticed that when I place my variable inside the mouseenter function it fixes the problem but is there anyway that I can place the variable outside the function?
-
I want to create an effect that it will load my web page gradually from 1 div to another once the page load. I have applied staggerFrom() method so that it can create the desired effect that will load from the header follow by content and extend till footer. But my problem is that when I put it on live server, the webpage will load the animation even though the content isn't fully loaded, resulting in freezing the animation for few seconds.... Is there any solution for this?
-
How do you set delay in scrollTo plugin? for example: tlS.to(window, 2, {scrollTo:{y:$(".goImg").offset().top, delay:4}, ease:Power4.easeInOut}) I want to delay it for 4 second but it doesnt work. and I not sure is this a bug or not that when I set ease to ease:Back.easeInOut, the scrolling stop working also...
-
thanks it works!
-
This is my pen: http://codepen.io/vincentccw/pen/qrsAg right now all the divs move together and back to its original position, but how do I animate the div 1 after another? Do I have to target every single div 1 by 1 and animate it? Wouldn't the code be massive is so?
-
Thanks Rhernando, I got the callback function working. Yes I'm using the scrollTo plugin now. I'm posting this because I can't seem to get it working in GSAP's Jquery version but the scrollTo plugin works just fine. just curious though
-
I want to run a function after the end of my animation but the callback function doesn't seem to be working? these are my code: $("body,html").animate({scrollTop: $(".slide2").offset().top}, {duration:2000, easing:"Back.easeInOut"}) .delay(2000).animate({scrollTop: $(".slide3").offset().top}, {duration:2000, easing:"Back.easeInOut"}) .delay(2000).animate({scrollTop: $(".slide4").offset().top}, {duration:2000, easing:"Power4.easeInOut"}) .delay(2000).animate({scrollTop: $("#mainContainer").offset().top}, {duration:2000, ease:"Power2.easeInOut", onComplete:completeHandler }); function completeHandler(){ $(".slide1").unmousewheel(); alert(callback); console.log("callback"); }
-
The secodn link isn't working though
-
Thanks I got it working
-
Thanks but 1 of your link appear to be broken, nevertheless everything is well documented in the documentation so is fine though I can refer from there.
-
How do I check if the current greensock animation is animating? Like in jQuery I can do it like this : $('.rightB').click(function(){ if (!$(this).is(":animated")) {//check for jquery animate only TweenLite.to(boxSlide, 1, {left:"-=100%"}); } }); The reason I want to do this is because my property is relative value and would cause complication if click continuously. I only want it to be able to click again only when the animation is done. Thanks for the help
-
I have created a sample for it: http://codepen.io/vincentccw/pen/vLIGh If you look into my javascript panel I have 2set of codes, one using jquery and GSAP another is just jquery(comment out). The code will be active once use scroll down using mouse wheel. My question is how do I use scrollTop but completely in GSAP? As I think GSAP is more readable and animate faster and most importantly I can set up more complex animation at the same time.
-
Thanks Rhernando, will update my code right away