Jump to content
Search Community

Play timeline only when .data is set to false

iuscare test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hello,

 

I have a expanding searchbar by using TimelineMax. If you click on the icon, the categories should scale away and the searchbar should expand to 100% width. When click anywhere on the body element while the searchbar is opened, the timeline should play in reverse state. This already works as intended.


My Problem is that the timeline reverse is being applied with every click on the body element, even if the searchbar is not expanded plus the timeline is being interrupted and being resetted when clicking on the body element while the timeline is being played. I tried to solve this issues to give the search container a .data value open true or false, but somehow it will not work as intended. This may not be an explicit greensock probleme but rather a javascript logic problem, but I'd be very grateful if anyone may help me out.

 

Timeline Code:

 

(function($) {

    var $irpsearch = $('#irp-newssearch-container'),
        $irpsearchinput = $('#irp-searchform-input'),
        $search_icon = $('.irp-news-search-icon'),
        $btn_container = $('.irp-filter-buttons'),
        $filter_btn = $('.filter-btn'),
        $search_seperator = $('.irp-search-seperator'),
        $body = $('body');

        var openSearchAnimation = new TimelineMax({
                paused: true
            })
            openSearchAnimation
                .staggerTo($filter_btn, .5, {scale: 0.7 ,opacity: 0,ease: Back.easeInOut},-0.1)
                .set($btn_container,{'display': 'none'})
                .to($search_seperator, .3, {opacity: 0, ease: Expo.easeOut}, '-=0.6')
                .to($search_icon, .5, {backgroundColor:"#ffffff", ease: Power0.easeNone}, '-=1.0')
                .to($irpsearch, 1.0, {width: '100%', ease: Power3.easeOut}, '-=0.1');

        openSearch = function () {
            $irpsearch.data('open', true);
            openSearchAnimation.play();
			$irpsearchinput.focus();
			return false;
		},
		closeSearch = function() {
            $irpsearch.data('open', false);
            openSearchAnimation.reverse(0);
        }


    $irpsearch.on('click', function(e) {
        e.stopPropagation();
        if (!$irpsearch.data('open')) {

            openSearch();

            /* Body Click */
            $body.off('click').on('click', function(e) {
                closeSearch();
            });

            /* Escape Hide */
  			$( document ).on( 'keydown', function ( e ) {
    			if ( e.keyCode === 27 ) 
      				closeSearch();
    			}
			});


        } else {
            if ($irpsearchinput.val() === '') {
                closeSearch();
                return false;
            }
        }
    });

})(jQuery)

 

Codepen: codepen.io/anon/pen/YQqQWm

 

 

 

 

 

All the best :)
Pascal

See the Pen YQqQWm by anon (@anon) on CodePen

Link to comment
Share on other sites

Hi

 

I'm not able to dig into all your code as this seems more like a logic questions than a GSAP one. Some things that can help...

 

Tweens and timelines have an isActive() method which lets you check to see if the animation is actively progressing. 

In the docs there is a demo that shows an animation that can only be reversed if it is not active. In your case you can check to see if the timeline isActive() and if so, then don't restart it.  See docs and demo: https://greensock.com/docs/#/HTML5/GSAP/TimelineLite/isActive/

 

You should be able to set a data-attribute and read it to figure out the open state of your menu, not sure where the problem was with that. Some people also just apply a class to the element as well. I'm not a big fan of that, and I would probably just use a boolean variable like isOpen = false. Something to consider is that you can also just check the progress() of your timeline. If the progress() is greater than 0 you know the search bar isn't closed. If progress() == 0, then the search bar is closed. If progress() ==1 then you know it is fully open.

Hopefully this stuff points you in the right direction.

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...