If else statement not working :(

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

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');
    }
});

Please format code by highlighting your code and clicking this button Screenshot_2017-10-04_121035

@samliew Okay gotcha! Any idea what I’ve done wrong? Keeps looping the first one after a successful loop of both.

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 Screenshot_2017-08-16_140811 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!

@samliew Hey man updated everything for you :slight_smile:

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 :slight_smile:

You cannot insert jQuery a second time. Webflow already does that for you.

Screenshot_2017-10-04_121044

@samliew Okay I’ll delete that.
I found a fix!!! Looks like i as missing the first_click = true for second click :slight_smile:

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
    }
});

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.

Screenshot_2017-10-04_121004

1 Like

noted for next time senpai :slight_smile: