benoit

Good style !

Hi, I make a graphic with bars and values like the codepen. Is there a better way to do this ? Is it better to make a loop for each 'rect' and tween or a loop inside onUpdate for each text ?

Great !

Hi, For a project, I use GSAP and I need to convert a SVG path to opentype curve. I made a custom Snag.svg (remove animation function) to convert Arcto to Curveto, but maybe there is a something like in GSAP ? http://snapsvg.io/docs/#Snap.path.toCubic

<a href="https://codepen.io/GreenSock/full/a591eba252e6f9534bc1eace09dc0571"> <button class="try">Try <strong>FREE</strong> on CodePen</button> </a> Hi, link to FREE codepen is 404 on https://greensock.com/docs/ Good link : https://codepen.io/GreenSock/pen/OPqpRJ

Hi, I made a cheat sheet for my students. Here is the first version in french (I can make a translation soon) : https://jenseign.com/ressources/memo-gsap-3/ Feedback welcome (If you can read french)

Hi, « Download GSAP (ZIP) » do nothing on click (Safari/Moz/Chrome) on this page : https://greensock.com/docs/v3/Installation

Thank you Jack !

Hi, I see tweets about a gsap v3 and some news — but now it's offline I would like to update my classes for students in december. Any release date ?

Strange https://codepen.io/benoitwimart/pen/ExYRLgO

Hi, Short question, can I cancel the .delay() ? Kill and rewrite the tween or there is a better solution ?

autoreply rtfm https://greensock.com/modifiersPlugin

@Carl anyway to know the current target if this is not target[0] ?

Thank you Carl, I try 'return this.target._gsTransform.x / 500' !

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);

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.

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();

Hi @mikel, It's look better with ease:Power0.easeNone But smooth and setInterval doesn't sound modern. I will try this trick.

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 ?

Hi, After many questions here, now it's time to see the result : https://jaiunsite.com/ thank you gsap !

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); }

I did like that :

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 });

I recode the function without killAll(); and with a few CSS line it's now OK…

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` ?