Search the Community
Showing results for tags 'tweemax'.
Found 5 results
-
Hy, I tried converting my blob animation to GSAP 3, but am having some dificulties, this is my old code: https://codepen.io/Josip-Bogdan/pen/JjxZLKO This is my new code: https://codepen.io/Josip-Bogdan/pen/xxMzLJv
-
Hello, I know the best practice is to use GSAP right now, but in one of our projects we use Diagonal slideshow which is pretty cool and it has been coded with tweenmax. Right now, we want to add pagination, so it works with indexes too, like all other sliders, but I couldn't figure it out since I'm newbie and the code is kind of complicated for me and I hoped maybe you can help me with this request.
-
I've a draggable bar, which can be drag horizontally. What I want to do is, on page scroll Is it possible to trigger draggable event to drag? Or is there any other way to achieve this. I already posted this question in StackOverflow but didn't get any response, So if someone could help me on this that would be appreciated.
-
Not sure why the image on section-2 doesn't center on scroll. I tried everything so far. It should appear from section-1, so with the offset, starts animating . What I'm I missing here? on leave should go back at the start on the left. new ScrollMagic.Scene({triggerElement: "#section-2",offset: -350, duration: $('#section-2').outerWidth(true)}) .on("enter", function(){ $("#anchor2").addClass('selected'); $("#section-2").addClass('animated fadeInUp'); var tl = new TimelineLite(); tl.to("#section-2.fadeInUp .animated-items", 1, { x: getMidX("#section-2.fadeInUp .animated-items")+20 } ); function getMidX( obj ){ return ( $(obj).parent().width()/2 ) - $(obj).width()/2; } }) .on("leave", function(){ $("#anchor2").removeClass('selected'); $("#section-2").removeClass('animated fadeInUp'); tl.to("#section-2.fadeInUp .animated-items", 1, { x: getMidX("#section-2.fadeInUp .animated-items")+20 } ); function getMidX( obj ){ return ( $(obj).parent().width()/2 ) - $(obj).width()/2; } }) .addTo(controller);
-
Hi ! I'm trying to add a setTimeout on hover to avoid a bug when the mouse is going fast on links. I tried a simple setTimeout but nothing setTimeout(function over(){ TweenMax.to($(this).find(".title_thumb"), 0.3, {display:"block" , opacity:"1" , marginTop:"20px" , ease:Power2.easeOut , delay:"0.2"}) TweenMax.to($(this).find(".view_thumb"), 0.3, {display:"block" , opacity:"1" , ease:Power2.easeOut , delay:"0.5"}); TweenMax.to($(this).find(".layer_thumb"), 0.02, {opacity:"1" , ease:Power2.easeOut}); }, 200); and also with this code but didn't find to make it work... $(document).ready(function(){ var delay=200, setTimeoutConst; $('.thumb').hover(function(){ setTimeoutConst = setTimeout(function(){ $(".thumb").hover(over, out); function over(){ TweenMax.to($(this).find(".title_thumb"), 0.3, {display:"block" , opacity:"1" , marginTop:"20px" , ease:Power2.easeOut , delay:"0.2"}) TweenMax.to($(this).find(".view_thumb"), 0.3, {display:"block" , opacity:"1" , ease:Power2.easeOut , delay:"0.5"}); TweenMax.to($(this).find(".layer_thumb"), 0.02, {opacity:"1" , ease:Power2.easeOut}); } function out(){ TweenMax.to($(this).find(".title_thumb"), 0.3, {display:"none" , opacity:"0" , marginTop:"0px" , ease:Power2.easeOut}) TweenMax.to($(this).find(".view_thumb"), 0.2, {display:"none" , opacity:"0" , marginTop:"0px" , ease:Power2.easeOut}) TweenMax.to($(this).find(".layer_thumb"), 0.02, {opacity:"0" , ease:Power2.easeOut}); } }, delay); },function(){ clearTimeout(setTimeoutConst ); }) }) If you have any idea I would be really glad. Thanks !
