Jump to content
GreenSock

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

benoit

Members
  • Posts

    74
  • Joined

  • Last visited

Recent Profile Visitors

2,170 profile views

benoit's Achievements

Newbie

Newbie (1/14)

28

Reputation

  1. autoreply rtfm https://greensock.com/modifiersPlugin
  2. @Carl anyway to know the current target if this is not target[0] ?
  3. Thank you Carl, I try 'return this.target._gsTransform.x / 500' !
  4. Hi, How to do this ? (without a second tl.to). var tl = new TimelineMax(); tl.to('div',4,{ x:'+=2400', modifiers : { x : function(x){ return x%500; } opacity : function(x){ /* don't try it at home :O) */ return x/500; } },ease:Linear.easeNone},0);
  5. Yes @mikel but I need a snap on keyup and get information about the first element… I think I am in the good way with rAF. Just need now to add a "isActive" to control quick keyup.
  6. var main = document.querySelector('main'); var count = 0; var raf = false; function move(){ count -= 1/30; TweenMax.set(main,{x:count*300}); if(raf){ requestAnimationFrame(move); }else{ count = Math.round(count-.5); TweenMax.to(main,.5,{x:count*300}); /* not perfect */ } } document.addEventListener('keydown',function(e){ if(!raf) requestAnimationFrame(move); raf = true; }); document.addEventListener('keyup',function(e){ raf = false; }); work in progress();
  7. Hi @mikel, It's look better with ease:Power0.easeNone But smooth and setInterval doesn't sound modern. I will try this trick.
  8. Hi, I would like to make a NetFlix like page (the AndroidTV version or any version with remote). It's like this : screenshot How to make the horizontal scroll more smooth on long press and on keyup snap to the element ? Is TweenMax the best way ?
  9. benoit

    experimentation

    Hi, After many questions here, now it's time to see the result : https://jaiunsite.com/ thank you gsap !
  10. I can't fork this pen from @OSUblake but I found how to snap the draggable, so here is my trick : var $overflow = $("#overflow"); var colors = ["#f38630","#6fb936", "#ccc", "#6fb936"]; var progress = 0; var size = 500; //initially colorize each box and position in a row TweenMax.set(".box", { backgroundColor:function(i) { return colors[i % colors.length]; }, x: function(i) { return i * 50; } }); var animation = TweenMax.to(".box", size, { // size = time ease: Linear.easeNone, paused: true, x: "+=500", //move each box 500px to right modifiers: { x: function(x) { return x % 500; //force x value to be between 0 and 500 using modulus } }, repeat: -1 }); Draggable.create('#proxy', { type: "x", trigger: document.documentElement, throwProps: true, onDrag: updateProgress, onThrowUpdate: updateProgress, onThrowComplete:updateProgress, snap: {x: function(value) { return Math.round(value / 50) * 50; }} }); function updateProgress() { animation.seek(this.x); }
  11. Hi, How to deal with others properties in modifiers function ? var animation = TweenMax.to(".box", 25, { ease: Linear.easeNone, x : "+=600", modifiers: { x: function (x) { return x%600; }, /* opacity: function(i){ if(x>400){ return 0 } return 1; } */ }, repeat: -1 });
  12. I recode the function without killAll(); and with a few CSS line it's now OK…
  13. It's a big reduced test case… Is it bad to killAll ? Can I just overwrite `tlEsad` if it was kill ? how to check if it's kill `tlEsad.duration===0` ?
  14. Hi, I have few timelines for an open/close content with animation (transitions), I use killAll to deal with fast click between open and close, it's do the work. Now I would like to add some simple tl with animation on mouse enter/leave… and killAll, kill them… how to unkill ? I don't know how I can deal with that.
×