myradon

Thanks! I forgot to mention one should ignore the HTML-pane on Codepen. Other question why sometimes animation start halfway first timeline. First I though maybe the DOM isn't ready. So I wrapped Evenentlistener DOMContentReady around the code. Sometimes still same problem. The reset-button triggers event tl.pause(0) always solves the problem. I find it a bit odd.

Hey guys I've got a question concerning transformOrigin behaviour and why there is a difference in end-location of a group in SVG; Why does this; tlBalloon1.addLabel("start", 0); tlBalloon1.fromTo(balloon1, 0.35,{ css: {y: 0, opacity: 0, scale: 0.25}}, { css: {y: "-=10", opacity: 1, scale: 1, transformOrigin:"right bottom"}, ease:Back.easeOut.config(3)}, "start"); tlBalloon1.fromTo(balloon1, 0.35,{ css: {rotation: "-=20"}}, { css: {rotation: 0, transformOrigin: "right bottom"}, ease:Back.easeOut.config(3)}, "start"); Pen A have a different outcome then this; tlBalloon1.addLabel("start", 0); tlBalloon1.fromTo(balloon1, 0.35,{ css: {y: 0, rotation: "-=20", opacity: 0, scale: 0.25, transformOrigin:"right bottom"}}, { css: {y: "-=10",rotation: 0, opacity: 1, scale: 1}, ease:Back.easeOut.config(3)}, "start"); Pen B OKAY guys I found out myself. It appears when I start with offsetting attributes and I would like to transform to original I have to set transformOrigin in altered from-section.

Hi ticktockreed, I saw your project really nice animations. I was wondering how you animate/ tween with GSAP and use SnapSVG? I've fiddled a bit with SnapSvg v0.2. At that time it seemed buggy when it comes to animation with different easings and timings. GSAP does a really good when it comes to this. I'm playing with GSAP on my dev-server over at www.myradon.net You can only use very basic SVG-shapes only with GSAP. Animating paths isn't possible. how can you animate eg. a path form one shape to the other with GSAP+SVG? A good example is on Codrops; http://tympanus.net/Development/OffCanvasMenuEffects/elastic.html It's done with only Snap and CSS3. I would love to use something like that but with GSAP for tweening.

Thanks for you reply. transformOrigin doesn't work with FF28. the pivot-point is just left-top. Yep Chrome works. Mozilla F'ed FF28 up; getTotalLenght() calculates wrong lengths.

Is anybody out there?!

@akbr nice plugin. I'm wondering how can I use your plugin and rorate around the center of a group? I've got some SVG-buttons which I want to animate from a open-button/plus-sign to a cross-sign or close-button. <svg version="1.1" role="img" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="55px" height="55px" viewBox="0 0 70 70" xml:space="preserve"> <circle class="icon-bg" cx="35" cy="35" r="30"/> <g> <line x1="25" y1="25" x2="45" y2="45"/> <line x1="25" y1="45" x2="45" y2="25"/> </g> </svg> var animIconsDetail = function() { var $workDetails = $( 'section#work-details' ), $anchors = $workDetails.find( 'a.btn-close' ), backgroundColors = [], children = $workDetails.children( 'article' ), circleProps = { size : { start : $($anchors[0]).find( '.icon-bg' ).attr( 'r' ), end : 35 }, opacity : { start : $($anchors[0]).find( '.icon-bg' ).css( 'fill-opacity' ), end : .9 } }, lineProps = { width : { start : $($anchors[0]).find( 'line' ).css( 'stroke-width' ), end : 5 } }, groupBBox = $($anchors[0]).find( 'g' )[0].getBBox(), pivotGroup = { x : groupBBox.x + (groupBBox.width / 2), y : groupBBox.y + (groupBBox.height / 2) }; console.info(pivotGroup); children.each( function(index, elem){ var bg = $(elem).css('background-color'); backgroundColors.push(bg); }); console.info($anchors, backgroundColors, circleProps.size.start); $anchors.each( function(index, elem){ elem.circle = $(elem).find( 'circle' ); elem.group = $(elem).find( 'g' ); elem.line = $(elem).find( 'line' ); elem.bgColor = backgroundColors[index]; }); $anchors.on({ mouseenter : function(event) { TweenMax.to(this.circle, duration, { attr: { r: circleProps.size.end }, css: {fillOpacity: circleProps.opacity.end}, ease:easing}); TweenMax.to(this.group, duration, {svg: {rotation: -45, scale: 1, localPivot: pivotGroup}, ease:easing}); TweenMax.to(this.line, duration, {css: { stroke: this.bgColor, strokeWidth: lineProps.width.end}, ease:easing}); }, mouseleave : function(event) { TweenMax.to(this.circle, duration, { attr: { r: circleProps.size.start }, css: {fillOpacity: circleProps.opacity.start }, ease:easing}); TweenMax.to(this.group, duration, {svg: {rotation: 45, scale: 1, localPivot: pivotGroup}, ease:easing}); TweenMax.to(this.line, duration, {css: {stroke: colorPallet[0], strokeWidth: lineProps.width.start}, ease:easing}); } }); }; the object pivotGroup holds the propper x and y coordinate for the center-position of the group. But I can't figure out how I could use these points in the Tween. You can find these tweens in the jquery on-method as second TweenMax.to(). When I outcomment line 354 and 355 of SvgPlugin.js group starts to rotate but localPivot doesn't do anything. //dx += t.attr("x"); //dy += t.attr("y");

How about performance? I was thinking when assiging functions as methods to the jQuery-object in a loop it will have a smoother experience because not everything has to be done on the actual event. var moveDown = function(elem) { var moveDown = new TimelineMax({repeat: 0, paused: true, overwrite: "all"}); moveDown.to(elem, duration, //to { attr: { cy: ellipseProps.to.cy, rx: ellipseProps.to.rx, ry: ellipseProps.to.ry }, ease:Elastic.easeOut } ); return moveDown; } var moveUp = function(elem) { var moveUp = new TimelineMax({repeat: 0, paused: true, overwrite: "all"}); moveUp.to(elem, duration, //from { attr: { cy: ellipseProps.from.cy, rx: ellipseProps.from.rx, ry: ellipseProps.from.ry }, ease:Back.easeIn } ); moveUp.timeScale(3); return moveUp; } $anchors.each( function(index, elem) { elem.ellipse = $(elem).find( 'ellipse' ); elem.moveDown = moveDown(elem.ellipse); elem.moveUp = moveUp(elem.ellipse); }); $anchors.on({ mouseenter: function(event) { this.moveDown.play(); this.moveUp.progress(0).pause(); }, mouseleave: function(event) { this.moveUp.play(); this.moveDown.progress(0).pause(); } }); I thought it would be better with performance in mind but it doesn't behave as I would expect. so I gave up.

Hi Carl, Thanks for your reply. So basically less is more. you mean just code it like; $anchors.each( function(index, elem) { elem.ellipse = $(elem).find( 'ellipse' ); }); $anchors.on({ mouseenter: function(event) { TweenLite.to(this.ellipse, duration, { attr: { cy: ellipseProps.to.cy, rx: ellipseProps.to.rx, ry: ellipseProps.to.ry }, ease:Elastic.easeOut }); }, mouseleave: function(event) { TweenLite.to(this.ellipse, duration / 3, { attr: { cy: ellipseProps.from.cy, rx: ellipseProps.from.rx, ry: ellipseProps.from.ry }, ease:Back.easeIn }); } }); The above code works like a charm.

Hi Rodriqo, I've made a sample over at jsFiddle. http://jsfiddle.net/myradon/LFT4t/5/ I've also got i fiddle with SnapSVG; http://jsfiddle.net/myradon/UtEnN/2/

haha I checked my animations and it didn't feel like a natural bounce or elastic and I gave it a thought. Then it became clear to me that easing the time will not influence overshooting of the attributes in the timeline. So basically what I want the animating ellipse look like it's bouncing in the ground it will get compressed. For animation this means the 'ry' will let's say go from 200 to 600 then 575 then 595 and so on. For the reverse direction I don't want this because the ellipse will disappear from the SVG-canvas (negative cy-coordinate), so any complex animation is a waste of CPU-power Is this still possible with one timeline?

Aha! Thanx! This library is sooo neat! As a designer it's like in the candystore. Awesome So the 'progress: 1' means normal direction of timeline and 'progress: 0' is reversed. I couldn't find it in the documentation under TweenLite/Max. You also wrote{time:0, ease:Back.EaseOut}. When I check the docs it states writing like Back.easeInOut or BackInOut. The first one causes wierd glitching of animation and the second just throws an error. Could you explain this? I also tried the easing of time. but it doesn't seem to have any effect. All the easingsa look the same ; TweenMax.to(this.animate, duration, {time:this.animate.duration(), ease:Quint.EaseOut});

Hey guys, I'm playing a bit with GSAP to use for my future website. Gonna drop Snapsvg and only use jQuery along with GSAP. I was wondering how I could ease an animation in reverse differently? So let's say anim.play() will use ease:Elastic.easeInOut and the reverse() would use eg. ease:power1.easeOut. Is this possible? Here is a code-axample which I'm currently playing with; var animateThumbs = function() { var $anchors = $( 'div.col-md-4' ).children( 'a' ), ellipse = $($anchors[0]).find( 'ellipse'), duration = .25, ellipseProps = { from: { cy: ellipse.attr('cy'), rx: ellipse.attr('rx'), ry: ellipse.attr('ry') }, to: { cy: -500, rx: 625, ry: 725 } }; //Let's set on every a-element a timeline as method $anchors.each( function(index, elem) { var ellipse = $(elem).find( 'ellipse' ), animateSvgBG= new TimelineMax({repeat: 0, paused: true }); animateSvgBG.fromTo(ellipse, duration, //from { attr: { cy: ellipseProps.from.cy, rx: ellipseProps.from.rx, ry: ellipseProps.from.ry }}, //to { attr: { cy: ellipseProps.to.cy, rx: ellipseProps.to.rx, ry: ellipseProps.to.ry }} ); //animateSvgBG.to(ellipse, 1, { attr: { cy: ellipseProps.from.cy, rx: ellipseProps.from.rx, ry: ellipseProps.from.ry }}, "fadeOut"); //labelsArray = animateSvgBG.getLabelsArray(); //console.info(labelsArray); elem.animate = animateSvgBG; }) $anchors.on({ mouseenter: function(event) { // from "fadeIn" to "fadeOut" //TweenMax.fromTo(animateSvgBG, duration, {time:labelsArray[0].time}, {time:labelsArray[1].time}); //console.info( "animateSvgBg: " + animateSvgBG, " labelsArray[0].time: " + labelsArray[0].time, " labelsArray[1].time: " + labelsArray[1].time ); this.animate.play(); }, mouseleave: function(event) { // nfrom "fadeOut" to "fadeIn" //TweenMax.fromTo(animateSvgBG, duration, {time:labelsArray[1].time, ease:Ease.easeOut}, {time:labelsArray[0].time}); this.animate.reverse(); } }) }