0

I have a div containing 3 options that can be active, and when one of them is selected(becomes active) the connector/lines associated with that element should trigger and initiate the animation. So far I have it displayed but can't figure out how to fire the animation every time the first option becomes active, and disable it when it isn't active.

CodePen

<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<div class="demo">
<div class="demo__content">
    <h2 class="demo__heading">Assessment <small></small></h2>
    <div class="demo__elems">
        <div class="demo__elem demo__elem-1">Novice Assessment</div>
        <div class="demo__elem demo__elem-2">Intermediate Assessment</div>
        <div class="demo__elem demo__elem-3">Advanced Assessment</div>
        <span class="demo__hover demo__hover-1 active"></span>
        <span class="demo__hover demo__hover-2 active"></span>
        <span class="demo__hover demo__hover-3 active"></span>
        <div class="demo__highlighter">
            <div class="demo__elems">
                <div class="demo__elem">Novice Assessment</div>
                <div class="demo__elem">Intermediate Assessment</div>
                <div class="demo__elem">Advanced Assessment</div>
            </div>
        </div>
        <div class="demo__examples">
            <div class="demo__examples-nb">
                <div class="nb-inner">
                    <div class="example example-adv">
                        <div class="example-adv">
                            <div class="example-adv__top">
                                <div class="example-adv__top-search"></div>
                            </div>
                            <div class="example-adv__mid"></div>
                            <div class="example-adv__line"></div>
                            <div class="example-adv__line long"></div>
                        </div>
                    </div>
                    <div class="example example-web">
                        <div class="example-web__top"></div>
                        <div class="example-web__left"></div>
                        <div class="example-web__right">
                            <div class="example-web__right-line"></div>
                            <div class="example-web__right-line"></div>
                            <div class="example-web__right-line"></div>
                            <div class="example-web__right-line"></div>
                            <div class="example-web__right-line"></div>
                            <div class="example-web__right-line"></div>
                        </div>
                    </div>
                    <div class="example example-both">
                        <div class="example-both__half example-both__left">
                            <div class="example-both__left-top"></div>
                            <div class="example-both__left-mid"></div>
                        </div>
                        <div class="example-both__half example-both__right">
                            <div class="example-both__right-top"></div>
                            <div class="example-both__right-mid"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


   document.addEventListener('DOMContentLoaded', function() {
   $(document).ready(function() {
       $('.demo__hover').on('click', function() {
           $that = $(this);
           if ($('.demo__hover.active').length > 0) {
               $('.active').removeClass('active');
           }
           $($that).addClass('active');
       })
   })

});

Christopher Karam
  • 878
  • 1
  • 6
  • 19
  • You should by default have a CSS class that blocks the animation - using animation:none; When a div is selected, you then remove the associated CSS class so the animation can start. – Niss Oct 31 '17 at 17:41
  • `$that` is already an object/selector meaning you don’t have to `$($that).addClass(‘active’);’ - just use `$that.addClass(‘active’);`. Here is more info on storing jQuery objects in variables, https://stackoverflow.com/questions/24053838/store-jquery-selector-in-variable. – Josh Murray Oct 31 '17 at 18:24

1 Answers1

1

I strongly suggest to refactor my code but I edited your pin, adding a class that block animation by default: 

.block-anim {
  animation: none !important;
}

and some dirty JS that deal with it

https://codepen.io/ThomasTognacci/pen/POqRJa

Niss
  • 116
  • 6
  • 1
    The `.block-anim` CSS class is applied to all the animated elements. The JS is just adding/removing that class to the correct elements. You could improve the result by "rewinding" the CSS animation using `animation-direction: reverse` but that would imply to use an additional class that triggers that effect – Niss Oct 31 '17 at 17:55
  • I see, that works quite well, and yes I'll refactor the code and add the reverse animation class. Thanks for the help! – Christopher Karam Oct 31 '17 at 19:05
  • 1
    It's a bit more complex and you will probably have to add 'states' via JS to better control the animation. I edited the pen to show you a way you could use - I didn't complete it so you can only go one step at a time otherwise it breaks but you get the point. A thing to remember is to add the `.block-animation` class everytime you need to 'reset' the CSS animations and also to set `animation-fill-mode:both` so animations can play/end in both directions. – Niss Nov 01 '17 at 03:55