jschr
commented
7 years ago hey @gonardfreeman, right now I don't believe textillate makes this easy and would probably rely on a proper reset / destroy method (https://github.com/jschr/textillate/issues/80).
The cleanest way may be to create a new textillate for the new texts and remove (or manually fade out) the old textillate element.
If you do get this working please post back here for other users to benefit from. I'm also happy to accept any PRs that would make this easier.
Good luck!
gonardfreeman
Works fine for me, except passing options to out animation, but I'm make data-out-animation and all works fine. I've got question, if I'm getting text from getJSON and I'm need to refresh that texts, how can I use your plugin to remove old text, and then animate new? Here some of my code, below
$.getJSON(url+count) .done(function(data){ $('#text').text($(data[0]['content']).text().toUpperCase()).textillate({ in:{ effect: 'fadeInLeft', callback: function(){ console.log('animate in'); } }, }); $('#title').text(data[0]['title']).textillate('start'); }) .fail(function(){ console.log('ERROR'); });$.getJSON(url+count) .done(function(data){ $('#text').text($(data[0]['content']).text().toUpperCase()).textillate({ in:{ effect: 'fadeInLeft', callback: function(){ console.log('animate in'); } }, }); $('#title').text(data[0]['title']).textillate('start'); }) .fail(function(){ console.log('ERROR'); }); $('#new_click').on('click',function(e){ $('#text').textillate('out'); $('#title').textillate('out'); e.preventDefault(); count++; $('#text').on('outAnimationEnd.tlt', function(){ //$('#text').empty(); $.getJSON(url+count) .done(function(data){ $('#text').text($(data[0]['content']).text().toUpperCase()).textillate('in'); $('#title').text(data[0]['title']).textillate('start'); }) .fail(function(){ console.log('ERROR'); }); }); });