BPolak
-
Content Count
15 -
Joined
-
Last visited
-
// 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:[]});
-
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.
-
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
