smallio
(Will Small)
October 4, 2017, 12:45am
1
I’m trying to trigger textillate.js in/out animations on a menu. Works fine on the first click but the second won’t trigger. The first snippet is what I have in webflow working right now, the second is what I’m trying to do. The text comes in fine by default at a 500ms delay as well.
First
var $tlt = $('.tlt').textillate({
autoStart: true,
initialDelay: 500,
outEffects: [ 'hinge' ],
in: { effect: 'rollIn' }
});
$('.burger').on('click', function () {
$tlt.textillate('in');
});
Second
var $tlt = $('.tlt').textillate({
autoStart: true,
initialDelay: 500,
outEffects: [ 'hinge' ],
in: { effect: 'rollIn' }
});
var first_click = false;
$('.burger').on('click', function () {
if (first_click) {
$tlt.textillate('out');
first_click = false;
} else {
$tlt.textillate('in');
}
}
Here’s my site - http://socialeyesanimations.webflow.io/
Here’s the webflow link - https://preview.webflow.com/preview/socialeyesanimations?preview=cf4a3c1ea12913163ebbe7038f040b5a
smallio
(Will Small)
October 4, 2017, 1:06am
2
Update it works but won’t loop! horray!
Any Ideas to make this reset so it stops repeating the in animation?
var $tlt = $('.tlt').textillate({
autoStart: true,
initialDelay: 500,
outEffects: [ 'hinge' ],
in: { effect: 'rollIn' }
});
var first_click = true;
$('.burger').on('click', function () {
if (first_click) {
$tlt.textillate('out');
first_click = false;
} else {
$tlt.textillate('in');
}
});
samliew
(webflowexpert.com)
October 4, 2017, 1:07am
3
Please format code by highlighting your code and clicking this button
smallio
(Will Small)
October 4, 2017, 1:10am
4
@samliew Okay gotcha! Any idea what I’ve done wrong? Keeps looping the first one after a successful loop of both.
samliew
(webflowexpert.com)
October 4, 2017, 1:14am
5
Sorry, I have no idea what your code does on your site. You might need to provide additional information.
Welcome to the Webflow forum!
Could you please edit and provide ALL the necessary details in your post so we can take a look at your site/issue?
In future if you want faster replies and more accurate answers, I suggest including all the details listed in the link above before someone has to ask.
Hope to hear from you soon. Thanks!
smallio
(Will Small)
October 4, 2017, 1:20am
6
@samliew Hey man updated everything for you
I’ve turned off my menu and a few other things so you can see, just click the menu to see the animation, it comes in first with a delay of 500ms. After that you should be able to trigger it on and off via the burger once, then it just keeps repeating the in animation.
Hope you can help
samliew
(webflowexpert.com)
October 4, 2017, 1:29am
7
You cannot insert jQuery a second time. Webflow already does that for you.
smallio
(Will Small)
October 4, 2017, 1:31am
8
@samliew Okay I’ll delete that.
I found a fix!!! Looks like i as missing the first_click = true for second click
var $tlt = $('.tlt').textillate({
autoStart: true,
initialDelay: 500,
outEffects: [ 'hinge' ],
in: { effect: 'rollIn' }
});
var first_click = true;
$('.burger').on('click', function () {
if (first_click) {
$tlt.textillate('out');
first_click = false;
} else {
$tlt.textillate('in');
first_click = true
}
});
samliew
(webflowexpert.com)
October 4, 2017, 1:31am
9
You forgot #5: Check the browser console on the published site, and if there are any errors (red text), please take a screenshot and include it into your post as well.
1 Like
smallio
(Will Small)
October 4, 2017, 11:23am
10
noted for next time senpai