BPolak

// Obj from database var obj = { playtimeMs: 3000, segments: [ {left: 100}, {left: 100}, {left: 100}, {left: 100}, {left: 100}, {left: 100}, {left: 100}, {left: 120}, {left: 140}, {left: 160} ] }; // time each segment var msEachSegment = (obj.playtimeMs / obj.segments.length) / 1000; // timeline class var tl = new TimelineMax(); // loop through segments and add to timeline for (var i = 0; i < obj.segments.length; i++) { tl.to(element, msEachSegment, obj.segments[i]); }; // playtimeline tl.play(); Solved with th

Yes, I think I choosed the wrong plugin for what I want. What I'm dealing with is a recorded path of an user. When the user moved continues, then the bezierPlugin is perfect and easy to use. When the user stops at some point for x-seconds, the bezierPlugin is not the right thing to use. Because users can stop, I think I've to dive into TimelineMax. It's not hard coded segments, so I've to loop through an array and push it into a timeline, if someone has an easy sample it would help. Otherwise I will post my solution later on here

var testBezierPath = [ { left: 100, top: 100 }, { left: 100, top: 100 }, { left: 100, top: 100 }, { left: 100, top: 100 }, { left: 100, top: 100 }, { left: 100, top: 100 }, { left: 100, top: 100 }, { left: 100, top: 100 }, { left: 100, top: 100 }, { left: 100, top: 100 }, { left: 100, top: 100 }, { left: 100, top: 100 }, { left: 100, top: 100 }, { left: 100, top: 100 },

Thanks OSUblake, I used them both to create a getPercentage. function getPercentage(element) { return Math.floor(DrawSVGPlugin.getPosition(element)[1] / (DrawSVGPlugin.getLength(element) / 100)); } Working perfectly.

TweenMax.staggerFromTo(counterElement.find('g path'), details.speed, {drawSVG:"0", ease:Sine.easeOut}, {drawSVG:details.percentage+"%", onUpdate: function(){console.log(this)} }); The animation works correctly. The onUpdate is working either. Now I want to get the current percentage of the drawSVG in the onUpdate. I looked in the this result object, but can't find any variable with current percentage. How to achieve this?

Nevermind! Found it! onThrowUpdate

Hi all, I want to call a function while throwing. For dragging we have onDrag with OnDragParams. But is there something like onThrow? I want to detect current DIV on position while its getting thrown. Would be amazing! I hope for an answer / workaround to fix this. Working code (but without onThrow) : Draggable.create(PB[m_].el.contentDraggable, {type:"x", bounds: PB[m_].el.contentWrapper, edgeResistance:0.2, lockAxis:true, throwProps:true, onDragEnd:PB[c_].dragEnd, onDrag: PB[c_].whileDragging, onDragParams:[]});

Incredible! Absolutely stunning. This will give addicted GreenSock users like me many more ideas. This in combination with other gsap plugins is getting the web to next levels. Many thanks!!

Hi Diaco Thanks, great discuss. I will dig into it. And yes, I want it TweenMax only. Additionally, I posted the unminified code. Hi Jonathan Tested in all browser, like FF (32) . Testing in chrome most of the time. Win7 yes. I reconize some issues, still not flawless yet. I'm going to work on it soon again.

Hmm.. I'll take another look today. I can't really notice the problem that you describe, so I will make sure the JS code is unminified in next update (today). I'll let you know when it's done.

Correct, only slow drag was working, I solved this issue. It should work properly now. If there is noticed any other thing, please let me know. Thanks all.

Hey all, $.TweenSortable() Easy to use: <div id="sort-list"> <div class="slide"><span>Slide 1</span></div> <div class="slide"><span>Slide 2</span></div> <div class="slide"><span>Slide 3</span></div> <div class="slide"><span>Slide 4</span></div> </div> <!-- JavaScript --> <script type="text/javascript" src="js/greensock/TweenMax.min.js"></script> <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script> <script type="

Hi Blake and Carl, Many thanks for the feedback! Issue solved.

Infinity Scrolling: load the image when it’s (about to appear) in viewport. Excellent for loadspeed. To show the loaded image with nice effect, we use GreenSock! Link to demo http://front-end.codes/gsap/infinity/ <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta author="Benny Polak"/> <title>Infinity Scrolling</title> <style> body { margin: 0; padding: 0; } #information { position: fixed; width: 100%; padding-top: 10px;

Jonathan is correct. Additional information (below jQuery 1.9) : I recommend jQuery.live() : $("#elementToWatch").live('click', callFunction); Live keeps watching for specific selector in the future. PS. If you use jQuery.on(), use instead of $(document).on the most nearby parent because of performance. I think these giving solutions will fix the problem, because we mentioned the XHR.