derp

Hey, Updated -> http://codepen.io/Ockenden/pen/ZQaoKP Thanks Mark

Hi! I'm having issues when reversing animations. I have a timeline which is used to show menu items. It is coupled with other animations and functions, but the issue only lies within this tween. When I play the animation the first time it's perfect. I reverse the animation, its fine. When I go to play it again, the delay between when the modalBG_cover shows, and the menu_anim seems to double, and this scales to the point where I could be waiting for some time for the second animation to start. Is there somewhere I can reference a solution? I'm not sure exactly what to look for in this case! My approach may be completely wrong, but this should be bread and butter stuff! Thanks var menu = document.getElementById( "menu" ); var modalBG_cover = document.getElementById("modalBG"); var menu_anim = new TimelineMax( { paused:true } ); menu_anim.to( menu, 1, { display: 'block' }, "-=1.8"); menu_anim.staggerTo( "#menu ul li a", 0.5, {opacity:1, top: 0, ease:Back.easeIn}, 0.05); var modalBG_show = new TimelineMax( { paused:true } ); modalBG_show.to( modalBG_cover, 1, { height: '100%' }); function menu_toggle( stunner ){ var target = document.getElementById("modalBG"); if ( target.classList.contains( 'open' ) ) { target.classList.remove( 'open' ); modalBG_show.reverse(); } else { target.classList.add( 'open' ); menu_anim.play(); } }

That is exactly what I need. I'm passing a parameter into the same function now for play/stop. Thanks for the help, much appreciated!!

Hey! I have an animation which executes a function that plays a tween on complete. onComplete: function(){ beatIt(); } While playing the animation fires this function, reversing the animation doesn't. The whole point of the 'beatit' function is to start a sub animation. I've also tried the below. It didnt work. I've put a timeout on it also, it didnt work. function beatIt(){ if ( Anim.progress() == '1' ) { heartbeat.stop(); console.log( 'stop' ); } else { heartbeat.play(); console.log( 'start' ); } } Is there a better way to programmatically start and stop animations? var Anim = new TimelineMax( { paused: true } ).add( beatIt ) The above also works forward, but it wont reverse the animation. Any code samples or suggestions on what I should look for in the docs would be a great help. Thanks!

Hey Carl, I noticed that the line was drawn backwards, the start point was drawn at the end of where the animation. I got one of the guys to remake the assets and it has both sorted out the alignment issue, and the issue with the SVG restarting. I'll mark this closed. Even tho fixing the SVG solved my problems, the above information will come in handy at some point in the near future I'm sure. Thanks for your help, Mark

Thats excellent, one last (small) question. christmasAnim.to($( '#christmasAnim #far_left' ), 1, {bezier: {values:bezierData, type:"cubic"}, ease:Linear.easeNone }); When the animation completes, the 'gift' is appearing at the start point. How can I make it stop and stay at the end of a path?

Hey Carl, Is this what you're looking for? http://codepen.io/Ockenden/pen/avMWLR It most definitely seems like thats the issue! I'm new to animating SVG, so I'm sure this is basic stuff I'm doing wrong. Thanks

Thats excellent, it worked and I really appreciate the quick reply! However there is an issue in the screenshot below... The item I'm trying to bind to the path is animating along the path, but it seems as tho the coordinates that are being generated are off by about 500px. This is also the size of my SVG's viewBox. Any idea what might cause this? Thanks!

Hi! I have a path which I've drawn in illustrator and exported as part of my SVG and I'm struggling to animate along it. Anytime I search for animating along a path, I keep getting suggestions to use the bezier plugin, which I have, but this requires me to enter in coordinates? At least thats what the documentation suggests. It it not possible to target an object and use it as a path that animates from 0-100% of the path? Here's my path data <path id="anim_path" class="st458" d="M103.5,371.5c0-99,26.4-184.2,84-213.3c64-32.4,175.9,91.2,180.5,212.8"/> Thanks Mark

Sorry, I have come across the updateTo function, but its saying the function is not recognised or maybe I'm using it completely wrong. I'm using easepack, css plugin, drawSVG, morphSVG, timelinemax and tweenmax. var tree = new TimelineMax( { paused: true } ); tree.fromTo($( "#right_tree" ), 0.6, { scaleX:"0%", scaleY:"0%", x: 20, y: 70 },{ scaleX:"1%", scaleY:"1%", x: 0, y: 0, ease: Elastic.easeOut }, "-=0.1"); tree.updateTo( $( "#right_tree" ), {}, { ease:Power2.easeOut } );

hey, I have a fromTo animation with an "Elastic.easeOut" which looks great on play(), but terrible on the reverse(). I was wondering if it is possible to toggle this? I'm trying to find something to target, so something like below would be ideal. That is, unless there is a better approach to this? ease: function(){ if ( tree.reversed() ) { return "Power2.easeOut"; } else { return "Elastic.easeOut"; } } Thanks! Mark