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 this logic I created Sorry for the inconvenience, I've could know this. I tunnelvisioned on the Bezier xD Thanks anyway gents!

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 }, { 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: 200, top: 100 } ]; TweenMax.to(element, 10, {bezier:testBezierPath, ease:Power0.easeNone}); In this example I want the element to stick to left 100 and on the last moment to left 200. So no skipping like it does now. In the example above, the element is slowly going to the 200 left.. Is there a way to no frame skipping or keep absolute positions per frame?

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:[]});

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="text/javascript" src="js/TweenSortable.min.js"></script> <script> $("#sort-list").TweenSortable(); </script> <!-- // JavaScript --> Demo url: http://front-end.codes/gsap/sortable/ File: TweenSortable.min.js (last update: 18th Oct 2014) - File size: 2 Kb - http://front-end.codes/gsap/sortable/js/TweenSortable.min.js What in TweenSortable? Unminified version: (function($){ /* Project GreenSock sortable with TweenMax (or Lite with Ease plugin) only */ $.fn.TweenSortable = function() { /* Script was done quickly (and a bit dirty on the margin-bottom for testing ^^) , still in development atm How it works right now, in steps: 1. At mouseclick on a binded element, the element will be cloned. 2. The cloned element will be on top of the original element. 3a. Mousemove binded on the cloned element and the cloned element will follow the cursor. 3b. Opacity of the original element will be 0. 3b. While moving the cursor (on the cloned element), it will check where the next or previous element is of the original element. 3c. When passing by the next or previous element, the original element will move to target in the DOM. 4a. Mouseup binded also on the cloned element. 4b. At mouseup the cloned element will 'ease' to the original element position. 4c. Original element opacity to 1, then clone element disapears. */ function dragSlide(e) { var slidePosition = $(this).offset().top, cloneId = Math.floor(Math.random() * 1E20), slideHTML = $(this).html(), mousedownPosition = e.pageY, slideElement = this, halfElementHeight = parseInt($(this).css('height')) / 2, elementHeight = parseInt($(this).css('height')), switchFlag = true, newPosition = 0, releasing = false; $(this).addClass('onDrag'); $(this).parent().find('.slide').each(function(){ if ($(this).hasClass('onDrag')) { $(this).css({"opacity":"0"}); } else { TweenMax.to($(this), 1, {opacity: 0.7}); } }) $('<div class="slide clone" id="clone-'+cloneId+'" style="position: absolute; top:'+slidePosition+'px">'+slideHTML+'</div>').appendTo($(this).parent()); $("#clone-"+cloneId).mousemove(function(e){ if (!releasing) { var dragDistance = parseInt(mousedownPosition-e.pageY); var mousePosition = e.pageY; if (dragDistance < 0) { dragDistance_ = String(dragDistance).split("-"); $(this).css({"top":(slidePosition + parseInt(dragDistance_[1])) +"px"}); } else { $(this).css({"top":(slidePosition - parseInt(dragDistance)) +"px"}); } if (!$(slideElement).parent().find('.slide:eq(0)').hasClass('onDrag')) { // check previous slide/item var prevElement = $(slideElement).prev().offset().top; if ($(this).offset().top < (prevElement + halfElementHeight)) { if (switchFlag) { switchFlag = false; TweenMax.to($(slideElement), 0.3, {height: 0, marginBottom: 0, ease:Cubic.easeOut}); TweenMax.to($(slideElement).prev(), 0.3, {marginBottom: (elementHeight + 20), ease:Cubic.easeOut }); newPosition = prevElement; setTimeout(function(){ TweenMax.to($(slideElement).prev(), 0.3, {marginBottom: 10, ease:Cubic.easeOut}); $(slideElement).insertBefore($(slideElement).prev()); $(slideElement).css({"marginBottom":"10px"}) TweenMax.to($(slideElement), 0.3, {height: elementHeight, marginBottom: 10, ease:Cubic.easeOut}); setTimeout(function(){ switchFlag = true; }, 310) }, 310) } } } // check next slide/item var nextElement = $(slideElement).next().offset().top; if ($(this).offset().top > (nextElement - halfElementHeight)) { if (switchFlag) { switchFlag = false; TweenMax.to($(slideElement), 0.3, {height: 0, marginBottom: 0, ease:Cubic.easeOut}); TweenMax.to($(slideElement).next(), 0.3, {marginBottom: (elementHeight + 20), ease:Cubic.easeOut }); newPosition = nextElement; setTimeout(function(){ TweenMax.to($(slideElement).next(), 0.3, {marginBottom: 10, ease:Cubic.easeOut}); $(slideElement).insertBefore($(slideElement).next().next()); $(slideElement).css({"marginBottom":"10px"}) TweenMax.to($(slideElement), 0.3, {height: elementHeight, marginBottom: 10, ease:Cubic.easeOut}); setTimeout(function(){ switchFlag = true; }, 310) }, 310) } } } }) $("#clone-"+cloneId).mouseup(function(){ releasing = true; if (newPosition == 0) { newPosition = slidePosition; } TweenMax.to($(this), 0.3, {top: newPosition, ease:Cubic.easeOut}); setTimeout(function(){ $(".slide").each(function(){ TweenMax.to($(this), 0.3, {opacity: 1}); }) }, 300); setTimeout(function(){ $(".onDrag").each(function(){ $(this).removeClass('onDrag'); }) $("#clone-"+cloneId).remove(); }, 600); }) } $(this).find('.slide').each(function(){ $(this).mousedown(dragSlide); }) } })(jQuery)

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; padding-bottom: 10px; font-size: 11px; background-color: #333; color: white; border-bottom: 1px solid black; font-family: tahoma, arial; z-index: 999; } #infinity-container { padding-top: 150px; position: relative; width: 353px; height: auto; margin: 0 auto; } p { margin-left: 40px; } .newImage { opacity: 0; } </style> </head> <body> <!-- HTML --> <div id="information"> <p>Dev: Benny Polak<br /> <strong>Infinity Scrolling with GreenSock</strong><br /><br /> Try it: scroll down<br /><br /> Images loaded and deployed in the DOM: <span id="image-count"></span></p> </div> <div id="infinity-container"> <!-- Images will be deployed here by JavaScript --> </div> <!-- // HTML --> <!-- 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> (function($){ var InfinityScroll = new Object(), m_ = 'model', v_ = 'view', c_ = 'controller'; InfinityScroll.model = { imageWidth: 353, imageHeight: 256, totallImages: 26, lastLoaded: 0 } InfinityScroll.view = { loadNextImage: function() { InfinityScroll[m_].lastLoaded++; var imageId = Math.floor(Math.random() * 1E20); if (InfinityScroll[m_].totallImages >= InfinityScroll[m_].lastLoaded) { InfinityScroll[v_].insertImage(imageId); TweenMax.to($("#image-"+imageId), 2, { opacity: 1, rotation: 360, ease: Back.easeOut, transformOrigin: "left top" }) } }, insertImage: function(imageId) { $('<img class="thisImage newImage" style="width: '+InfinityScroll[m_].imageWidth+'; height: '+InfinityScroll[m_].imageHeight+'; " id="image-'+imageId+'" src="images/'+InfinityScroll[m_].lastLoaded+'.jpg">').appendTo($("#infinity-container")); $("#image-count").text(InfinityScroll[m_].lastLoaded); } } InfinityScroll.controller = { init: function() { InfinityScroll[c_].trackClient(); }, trackClient: function() { var totalImagesHeight = $(".thisImage").length * InfinityScroll[m_].imageHeight; var currentViewport_bottom = ($(window).height() + $(window).scrollTop()) if ( totalImagesHeight < currentViewport_bottom ) { var missingImages = parseInt( ( (currentViewport_bottom - totalImagesHeight) / InfinityScroll[m_].imageHeight ) * 2); for (var i = 1; i <= missingImages; i++) { if (InfinityScroll[m_].totallImages >= InfinityScroll[m_].lastLoaded) { InfinityScroll[v_].loadNextImage(); // insert one image - no tweening } } } setTimeout(InfinityScroll[c_].trackClient, 10); } } $(document).ready(InfinityScroll[c_].init); })(jQuery) </script> <!-- // JavaScript --> </body> </html>

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.

Hi, for my first test with GSAP, I created an explosion effect. Go to the link and click anywhere in the window. http://www.front-end.codes/gsap/ Currently, I'm building a javascript based multiplayer game (without using WebGL or canvas..), for now it looks like the game will be 500% smoother with GSAP instead of the foolish jQuery animate. B