Jump to content
Search Community

nene

Members
  • Posts

    20
  • Joined

  • Last visited

Everything posted by nene

  1. No, I think this is not my solution. Well, I made more changes to the code and solve a little more, passiing values from two arrays to to animate two tween at same time but with diff values http://codepen.io/gerryAB/pen/VvagyP
  2. Hi Jonathan. Thanks for your reply. I have found a ittle more help. All I have done is use css (float and clear) divs for my purpose. Maybe now my big question is about what if the width data is not the same for both? p.e. div.clone:eq(0) != div.mirror:eq(0) width How can I take two array values to populate the data in my animation, and both animations run at same time? Thanks
  3. I don't know how to reflect or mirror the animation of my bars, I want that all of them grow up to opposite directions div.clone's make the animation correctly, but how can I do the same animations in all the div.clone.mirror, growing to the left side?
  4. Drew: 'you have win the heaven'. No more to say... Thanks for this very useful tutorial, I'm following every step
  5. Hi thanks for the help. I update the sample. Placed at the bottom a thumb gallery with tweenMax stagger. This should be what I want, but with an option of change directions, keyenter actions etc, like onlinedepartment has
  6. Hi all, Does somebody has development a little plugin with this topic? A simple slider with tweenMax I want to do a secuence like this: http://jquery.malsup.com/cycle2/demo/sync.php, with tweenMax, my goal is use some thumbnail gallery like this one http://onlinedepartment.nl/#culture, it's pretty cool!, Well, I'm trying this http://codepen.io/anon/pen/zAnCH to start changing directions (left|right, use nav arrows) but my first doubt is how to recall all the preccess to be used in a second, third, etc slider?
  7. Wow! Do not know how long this narrower start posting in the comment: 'Wow!' But the truth is that GSAP is another world, is on another level. Congratulations! Well, playing around with image sequences. I also wondered how well an animation control. An example of how everylastdrop.co.uk transformation in scroll: 27700, car to spaceship. How to do an animation frame by frame, and control the timeline? I think the first thing would have loaded all the images of the sequence, before assigning any animation, and then using javascript magic (arrays, loops, and TweenMax n TweenlineMax) and some css to switch background-image prop See it working: http://camal3on.globat.com/gs/ <div style0"width:80%;margin:100px auto;"> <div id="basket"> <div id="bskt-player"> <div id="bskt-ball"></div> </div> <a href="#" class="play">play()</a> <p id="time-speed"></p> </div> </div> The css: #basket{position:relative;border:1px solid red;width:80%;margin:50px auto;overflow:hidden;} #basket #bskt-player{float:left;width:97px;height:124px;border:1px solid red;margin:20px autp;position:relative;background-image:url(img/bskt0001.png);background-position:0 0;background-repeat:no-repeat;background-color:transparent;} #bskt_frames{position:right;padding:0 15px;margin-left:110px;background-color:#ededed;width:auto;margin-top:-95px;} #bskt_frames span{display:inline-block;vertical-align:top;float:left;margin-right:10px;} #bskt_frames span img{max-width:30px;} #time-speed{position:absolute;top:0;right:0;border:1px solid green;margin:2px;} #bskt-ball{background-color:#000;width:9px;height:9px;border-radius:50%;position:absolute;z-index:1;top:20px;left:60%;opacity:0;} .play{float:left;display:block;width:70px;text-align:center;} .cf:before,.cf:after {content:"";display:table;} .cf:after {clear:both;} /** * For IE 6/7 (trigger hasLayout) */ .cf {*zoom:1;} JS: $(document).ready(function($) { // Animate image secuence: var _basket = $("#basket"); var bskt_count = 0; var bskt_frames = [ // image and time_per_frame [1,1], [2,1], [3,1], [4,1], [5,1], [6,1], [5,1], [4,1], [3,1], [2,1], [1,1], [2,1], [3,1], [4,1], [5,1], [6,1], [5,1], [4,1], [3,1], [2,1], [1,1], [2,1], [3,1], [4,1], [5,1], [6,1], [7,1], [8,10], [9,4], [10,1], [11,1], [12,10] ] TweenMax.to(_basket.find('#bskt-player'),0.5,{ backgroundImage:"url(img/bskt0001.png)", //default width:200, repeat:1, yoyo:true, onComplete:doneBskt, onCompleteParams:['{self}','complete'] }); var tlBskt = new TimelineMax({paused:true,repeat:3,yoyo:true}); function doneBskt (evt,type){ if(type == 'complete'){ // add Tween to timeline for (var i=0;i<bskt_frames.length;i++){ var timeout = (bskt_frames[i][1]/10); var _curr = (bskt_frames[i][0]<10)?'000':'00'; _curr += bskt_frames[i][0]+'.png'; var _img = "url(img/bskt"+_curr+")"; tlBskt.add( TweenMax.to($("#bskt_frames span:eq("+i+")"),0.01,{'backgroundColor':'yellow',overwrite:'all',delay:timeout}) ); tlBskt.add( TweenMax.to(_basket.find('#bskt-player'),0.01,{backgroundImage:_img},"+="+timeout ) ) } // Final tween The Ball flying... I believe I can fly ;)' tlBskt.add( TweenMax.to('#bskt-ball',1,{top:-10,left:"-=50",autoAlpha:1,delay:-1}) ); // then play... tlBskt.play(); }} // Some jquery _basket.append('<div id="bskt_frames"></div> <div class="cf"></div>'); $.each(bskt_frames,function(i){ var _curr = (bskt_frames[i][0]<10)?'000':'00'; _curr += bskt_frames[i][0]+'.png'; var _img = 'img/bskt'+_curr; _curr += ', ('+bskt_frames[i][1]+')'; // console.log(i+' de '+bskt_frames.length+': '+_curr) $("#bskt_frames").append("<span>"+_curr+" <img src='"+_img+"' alt=''> </span> "); }); $("#bskt_frames").append('<div class="cf"></div>'); var speed = 1; $('#time-speed').text('timeScale('+speed+')'); $('a.play').on('click',function(e){ e.preventDefault(); speed = (speed<4) ? speed+1 : 1; tlBskt.timeScale(speed); tlBskt.restart(); if(speed==1) TweenLite.to('#bskt-player',4,{rotation:-360}); else if(speed==2) TweenLite.from('#bskt-player',2,{left:360,autoalpha:1,ease:Bounce.easeOut}); else if(speed==3) TweenLite.from('#bskt-player',2,{scale:2,ease:Strong.easeIn,repeat:2,yoyo:true}); else TweenLite.from('#bskt-player',2,{autoAlpha:0,delay:0.5,ease:Bounce.easeInOut}); $('#time-speed').text('timeScale('+speed+')'); }); });
  8. Wow! fixed, see again http://codepen.io/gerryAB/pen/noick Great idea, using the object as you say, it works. Dynamically takes the value, but why it works only with 'top' and 'left'? Thanks again, I'll continue training
  9. Hi, amazing tweenmax, really amazing, days of glory!! =) I'm doing some tests: http://codepen.io/gerryAB/pen/noick But I can't , at the end of #abs tween (timeline) is calling a funciton to detect from which side the mouse is enter, and then animate: If mouse enter from top: tween top:100 if left: tween left to right, botom and right In the if mouseenter the Tween is cycling, there is and error, how can I fix it? And how to detect the side and then apply the tween I want that #caption-abs make a tween from the side where the cursor has entered
  10. nene

    Blending

    Hi, me again, with little doubt. Check this plis: http://codepen.io/gerryAB/pen/wfuaB jonathan, used your recommendation on radial and linear css, it works great. There is a small detail. Not completely ending the gradient animation when you change to another option. If you choose another and roll over it the gradient tweening stops
  11. nene

    Blending

    Playing around with the same example: http://codepen.io/gerryAB/pen/wfuaB Using gradient changes, for example for a navigation menu. 1: Is it possible not to use the -vendors (o,moz,webkit...)-, for this to work on any modern browser 2: To advanced . For this application, using TweenMax | Lite, there is another option to achieve the same thing?. I would like to know. 3: I can not make on mouseover apply on the current div :eq(N) and not to the first. How to assig the tween to the current div?
  12. Believe me, I have followed all the instructions from http://www.greensock.com/get-started-js/#, but I can not put this plugin to work. I add .js files as indicated, but the console always sends me this message: TypeError: window.createjs is undefined My code: <script type="text/javascript" src="src/minified/plugins/EaselPlugin.min.js"></script> ... <script type="text/javascript" src="src/minified/easing/EasePack.min.js"></script> <script type="text/javascript" src="src/minified/jquery.gsap.min.js"></script> <script type="text/javascript" src="src/minified/TweenMax.min.js"></script> And a little example: var box6 = $('#box-6'); TweenMax.to(box6, .3, {easel:{tint:"#0000FF", tintAmount:1}, delay:1}); Others plugins work great, like bezier, css etc, only by adding its libraries, but not with this one. What I am doing wrong? Thank u
  13. Yes, that's it. Now it works like a charm. Thank u
  14. http://jsbin.com/aFEPAKa/1/edit this is a simple animation using both I am pausing one (cycle) and after run the other one (TweenMax). I want to make with TweeMax a different animation in the in the incoming and outgoing animation of DOM elements, but not during the transition ejecution of the cycle2 plugin I don't know,TweenMax works perfect, Cycle2 works perfect, but sometimes the h1 (animated with TweenMax) doesn't show propierty, like if a time remaining of the animations never has been cleared. How can I stop all Tweenmax animations to prevent this issue
  15. Hi GreenSock and parallax: http://johnpolacek.github.io/superscrollorama/ Easy and useful to parallax: http://prinzhorn.github.io/skrollr/ http://everylastdrop.co.uk/ Maybe you've already tried. I really liked to do some testing
  16. take a look at my lab: http://camal3on.globat.com/js/ I try to work with cycle2 and TweenMax, I can not check that at the break (cycle-on-hover: pause) TweenMax stops, either by using the pager, the slider goes crazy! Sorry, this is my very big code: // GSAP : function callGSAP(curr,nxt){ var tl = new TimelineMax({onStart:doSome,onComplete:someDone,repeat:1,repeatDelay:2,yoyo:true}); var currBnr = $('.cycle-slide:eq('+curr+')'); var nxtBnr = $('.cycle-slide:eq('+nxt+')'); tl.set(currBnr, {visibility:'visible',delay:1.5}) .fromTo("h1", 0.5, {left:100,autoAlpha:0},{left:0,autoAlpha:1}) .fromTo("h2", 0.5, {left:-100,autoAlpha:0},{left:0,autoAlpha:1},"-=0.25") .fromTo(".featured", 0.5,{scale:0.5,autoAlpha:0},{scale:1,autoAlpha:1,ease:Bounce.easeOut},"feature") .fromTo(".description",0.5,{left:100,autoAlpha:0},{left:0,autoAlpha:1},"feature+=0.25") .staggerFromTo(".nav div", 0.5, {scale:0, rotation:-180, autoAlpha:0},{scale:1, rotation:0, autoAlpha:1}, 0.2, "stagger"); } function doSome(){ $('#status span').text('starting to do something'); } function someDone(){ $('#status span').text('completed'); $('#status2 span').text('continue Cycle2 ...'); $('.cycle-slideshow').cycle('resume'); } // CYCLE2 : var slideshow = $('.cycle-slideshow'); slideshow.on( 'cycle-bootstrap', function( e,opts ) { $('#status2 span').text('INITIALIZE >> '+e.type); // $('#print').empty().html(printObj(opts)); }); slideshow.on( 'cycle-before', function( e,opts,outEl,inEl,fFlag ) { $('#status2 span').text('>> '+e.type+', '+fFlag); // $('#print').empty().html(printObj(opts)); $('.cycle-slideshow').cycle('pause'); callGSAP(opts.currSlide,opts.nextSlide); console.log(opts.currSlide,opts.nextSlide,opts.slideNum,opts.slideCount); }); slideshow.on( 'cycle-after', function( e, opts ) { var next = slideshow.data("cycle.opts").nextSlide; // playBanner(next); if ( !slideshow.is('.cycle-paused') ){ // goTimer(opts.timeout); } $('#status2 span').text('cycle-after next '+next); // cycle-initialized }); slideshow.on( 'cycle-paused', function( e, opts ) { $('#status2 span').text('cycle-paused'); }); slideshow.on( 'cycle-resumed', function( e, opts, timeoutRemaining ) { $('#status2 span').text('cycle-resumed '+timeoutRemaining); }); Something else to add ... I had to use yoyo, but I really would love that on entering the slide, GSAP animation 1 and leaving the slide, another different animation
  17. SuperWOW!! that's it, thanks a lot! Where/When can I learn all TweenMax like you know? haha just kidding... look, I use it over white bg so have to use the method fromTo: tn1 = TweenMax.fromTo(div1, 0.7, { boxShadow:'0px 0px 2px 2px rgb(250,250,250)', },{ boxShadow:'0px 0px 20px 8px rgb(0,255,0)', ... etc }); Many many thanks
  18. Grrrr! I'm fighting with that: var greenPulse = $("#bsBox5"); var tl4 = new TweenMax.fromTo(greenPulse, 0.7, { boxShadow: "0px 0px 0px 0px rgba(0,255,0,0.3)" }, { boxShadow: "0px 0px 20px 10px rgba(0,255,0,0.7)", repeat: -1, yoyo: true, ease: Linear.easeNone }); tl4.pause(); var tl5 = new TweenMax.to(greenPulse, 0.5, {backgroundColor:"black"}); A sample from here http://www.greensock.com/css3/ but I want to use with a mouseenter/leave action, how can I do that, when mouseleave, animation looping ends greenPulse.mouseenter(function(){ tl4.play(); }); // start looping greenPulse.mouseleave(function(){ tl4.resume({from:1,suppressEvents:false}); // HERE! how it ends in the same direction, not reverse });
  19. OK, Thanks a lot! ...it works. I'll revise this links
  20. Hi! dealing with css3 transforms, how do I apply this? tl.to(b,1,{css:{transform:"translateY(1000)",opacity:0},onComplete:function(){alert('END!');}},10); translateY(N) not works
×
×
  • Create New...