Surge

Thanks Jonathan. That fixed it! var transform_x = $(".test")[0]._gsTransform.xPercent;

Hi. Please can anyone help me get the transform.x of a node that is being animated by timelinemax? Please see codepen for my attempts. Thanks.

hmmm ok now i think of it i can remove the iframes src attribute and re add it. this should have the same effect as completely removing the element from the dom.... Hopefully. i just need it to reload the iframe you see.

ok thanks. i didn't know it works like that. i was thinking that the timeline would see the new dom element because the iframe has the same class name as it did have the first time it was added to the dom (before the removal onRepeat). so how would i tell the timeline to track the new element? i was hoping that using the exact same class would be enough.

Here is a code pen: http://codepen.io/chrissowerby/pen/jqpNmX The first time the timeline runs you will see the iframe get moved up. There is a .to() animation that moves the iframe up by animating its y value. After the timeline repeats this no longer happens. The iframe does get loaded in and i can see it in the dom but its as if the timeline skips over the .to() animation properties. I have also added a onComplete function to the .to() animation with a console.log within the callback function. I can see that the callback function does get called but the animations y properties do not get changed. Thanks.

I have had an issue recently where the timeline skips over some of the .to() animations. This only when it repeats itself. The first time the timeline runs it does the full timeline in order correctly. I want to see if i can get a more simple code pen put together to show this.

nice. was it a fix for the NaN?

I would like to understand why the issues happened but I have managed to do workarounds so I don't necessarily need help. The matrix(0,0,0,0,NaN,NaN) is still an unknown to me. http://greensock.com/forums/topic/12472-clearprops-with-svg-elements/?p=58745

Sorry I was thinking the data-svg-origin was the original d attribute before gsap started to morph the path. The reason i was attempting to reset the d attr back was because i noticed one of the paths was not being reset back to what it should be when the timeline repeated: on this code pen you can see that the green search bar button gets left behind when the timeline repeats: http://codepen.io/helpchrisplz/pen/KzzOBg I don't fully understand why it gets left behind and the only thing i could thing of was resetting the d attribute. But since then i have found that setting this path to be hidden at the end of the timeline works better: function onRepeat() { TweenMax.set("#green_btn", { autoAlpha: 0.0 }); } The "getting NaN" was a separate issue that was happening on a totally different code pen. I was not resetting the d attribute on this code pen. I guess i should have made another thread so the two couldn't get confused. http://greensock.com/forums/topic/12472-clearprops-with-svg-elements/#entry58745

Another thing to note (that might be normal but i have spend a day testing to figure out) is it seems yPercent and xPercent (or could be the transformOrigin: "0% 50% -50" i used in the tween options) doesn't like when you display:none the nodes its is set on. e.g: When loading the page with the svg animations on while using a mobile phone; i wanted the arrow animations to only show in landscape mode. This is because there is no room for it in portrait. So i used a display none on the svg elements using a media query: @media(max-width: 500px) {} When going back and forth between landscape and portrait the arrow tips when back to there positions before yPercent and xPercent (or could be transformOrigin) was set on them. Changing the display none to visibility:hidden fixed this problem. Seems simple but i spent a lot of time reordering code to finally figure this out. I hope this might help someone. http://recordit.co/pDOT6wzbRi http://codepen.io/helpchrisplz/pen/xVOWWZ

Hi I have found another error that only happens when your viewing a morph with a mobile viewport: codepen: http://codepen.io/helpchrisplz/full/PNzQGq/ recording showing the console errors: http://recordit.co/2wEW1JwPu4 error is: Error: Invalid value for <path> attribute transform="matrix(0,0,0,0,NaN,NaN)" TweenMax.min.js:15

I have updated the pen as my cleaning caused another unrelated bug. http://codepen.io/he...splz/pen/KzzOBg I noticed that my manual fix to set the d attribute does fix it when it repeats but adds an error in console: Error: Invalid value for <path> attribute d="210.69998168945312 39.5" e.g when i do this: var bad_el = $("#green_btn"); function onRepeat() { //TweenMax.set( "#green_btn", { x:0,y:0,rotation:0,opacity:0,clearProps:"all" } ) bad_el.attr("d", bad_el.attr("data-svg-origin")).removeAttr("data-svg-origin"); } var sowerby_slide_show = new TimelineMax({ //onUpdate: updateSlider, repeat: -1, onRepeat: onRepeat });

This might be easier to work with: http://codepen.io/helpchrisplz/pen/KzzOBg

Hi. I have a similar problem that could be due to my code but thought it might help people out. Here is a codepen showing my first attempt at a complex set of morphs: http://codepen.io/helpchrisplz/pen/GoLaJo I seem to have a bug in my code that causes one of the SVG elements to not be put back to how it was at the start of the timeline when repeating the timeline repeats. e.g repeat: -1 so I had a look in the dom and noticed the svg elements d attribute was not being put back to its origin svg data. I then created a function that would reset it back manually: var bad_el = $("#green_btn"); function onRepeat() { //TweenMax.set( "#green_btn", { x:0,y:0,rotation:0,opacity:0,clearProps:"all" } ) bad_el.attr("d", bad_el.attr("data-svg-origin")).removeAttr("data-svg-origin"); } var sowerby_slide_show = new TimelineMax({ //onUpdate: updateSlider, repeat: -1, onRepeat: onRepeat }); if you comment out this line in the codepen: bad_el.attr("d", bad_el.attr("data-svg-origin")).removeAttr("data-svg-origin"); You will see what i mean when the animation repeats. There is a green svg element left behind. If any one can put me in the right direction so i can find out what it is about this one svg element (#green_btn in this case) that causes it to be the only one that doesn't go back to normal on timeline repeat. That would be helpful. By the way I just relaunched our company website using lots of GSAP and want to show it off: surgemarketingsolutions.co.uk It uses the same animation as I am posting the code pen for in the top animated banner. The animations are also responsive Its been hard to get it out of the doors but I love what i have been able to achieve now i have found GSAP!

as an exmple: If you resize the width of the browser when viewing the following web page you will see that the image slider area scales: surgemarketingsolutions.co.uk Here is the code i put together to handle it: in the example code $(".slider_overflow") was my outer content wrapper $(".slide_outer") was my inner content wrapper (i know its named wrong! ) natural_width is the width on desktop - the maximum it can be natural_height is the height on desktop - the maximum it can be var contentResizeTimer; function scale_content_on_window_resize(outer, iner, natural_width, natural_height) { /* Here we pass in an outer wrapper and an inner wrapper. Our content sits inside the inner wrapper. We then calculate the scale from the original height and width of the outer wrapper. At desktop the scale will be 1.0 but as the browser width decreases the scale will gradualy get smaller. The calculated scale then gets set on the inner wrapper and the height of the scaled element then gets set on the outer wrapper. This is to remove the borders around the scaled inner element. */ var outer_width = outer.width(); if (outer_width > natural_width) { outer_width = natural_width; } var theScale = outer_width / natural_width; // Calculate the actual slides height after its scaled. var processed_height = theScale * natural_height; TweenMax.to(outer, 0.2, { height: processed_height, width: "inherit", maxWidth: "100%", ease: Power4.easeOut }); TweenMax.set(iner, { autoAlpha: 1.0, transition: "all 0.2s ease", transformOrigin: "top center", scale: theScale, marginLeft: "0px", marginTop: "0px" }); } // end function scale_content_on_window_resize $(window).resize(function() { clearTimeout(contentResizeTimer); contentResizeTimer = setTimeout(function() { scale_content_on_window_resize($(".slider_overflow"), $(".slide_outer"), 1140, 560); }, 100); }); scale_content_on_window_resize($(".slider_overflow"), $(".slide_outer"), 1140, 560);