Jump to content
Search Community

Very first tween doesn't animate

majofski 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

So, I know this is going to be a huge wall of code (so maybe just go through to the codepen) but I'm having a very minor issue. For the most part, everything that I've coded works (albeit, likely very bloated and ugly code)... except: the very first animation when "Trigger 2" is pressed doesn't work. Every subsequent one does. The first, doesn't. 

 

My html is as follows:

<ul>
  <li>
    <span class="reveal-trigger" data-target-id="reveal-recipient-1">Trigger 1</span>
    <div id="reveal-recipient-1" class="reveal-recipient">Target to reveal when I press Trigger 1</div>
  </li>
  <li>
    <span class="reveal-trigger" data-target-id="reveal-recipient-search" id="search-trigger">Trigger 2</span>
    <div class="reveal-recipient-container" >
      <div id="reveal-recipient-search" class="reveal-recipient">Target to reveal when I press Trigger 2
        <input id="boom" type="text">
      </div>
    </div>
  </li>
  <li>
    <span class="reveal-trigger" data-target-id="reveal-recipient-3" id="nav-trigger">Trigger 3</span>
  </li>
</ul>

<div id="reveal-recipient-3" class="reveal-recipient">This recipient is intentionally outside the ul containing the triggers</div>

CSS: 

.open {
  background-color:green;
}

li {
  float:left;
  list-style-type:none;
}

.reveal-recipient-container {
  //border:solid 1px red;
  height:120px;
  display:none;
  overflow:hidden;
  position:relative;
}

.reveal-trigger {
  padding:1em 2em;
  display:block;
  background-color:hsla(110,60%,50%,1);
  border-radius:3px;
  margin:5px;
  cursor:pointer;
  &:hover {
    background-color:hsla(110,60%,70%,1);
  }
  &.active {
    background-color:hsla(130,60%,40%,1);
    color:white;
  }
}

.reveal-recipient {
  position:absolute;
  width:100px;
  transform:translateY(-100%);
  display:none;
  background-color:white;
  padding:1em;
  box-shadow:0 2px 0 rgba(0,0,0,0.05);
  border:solid 1px rgba(0,0,0,.1)
}

And then, my loyal javascript:

$(document).on('click', function(event) {
  
  if (!$(event.target).closest('.reveal-recipient').length){
    if (!$(event.target).closest('.reveal-trigger').length){
      TweenMax.to($('.reveal-recipient'), .3, {display:'none', y:'-100%', autoAlpha:0});
      //remove open class from any open 
      $('.reveal-recipient').removeClass('open');
      $('.reveal-trigger').removeClass('active');
      $('.reveal-recipient-container').hide();
    } 
  }
  
});




$('.reveal-trigger').click(function(e) {
  
  //remove active class from other triggers
  $('.reveal-trigger').not(this).removeClass('active');
  //toggle active class on this trigger
  $(this).toggleClass('active');

  //get target element
  var triggerId = $('#' + $(this).attr('id'));
  var target = $('#' + $(this).attr('data-target-id'));
  var targetContainer = $($(target).parent().closest('.reveal-recipient-container'));
  
  // Animations
  
  if($(this).is('#search-trigger')) {
    var animation = TweenMax.to(target, .3, {display:'block', yPercent:'0%', x:'0%', autoAlpha:1, onComplete:function() {
      //once animation is complete, if the target has an input, focus on that input
      if(target.find('input').size() > 0) {
        target.find('input').focus();
      }
    }});
  }
  
  if($(this).is('#nav-trigger')){
    var animation = TweenMax.to(target, .3, {display:'block', y:'0%', x:'100%', autoAlpha:1});
  }
  
  
  //hide all elements of "target" class, except the current target
  if($('.reveal-recipient.open').not(target).size() > 0) {
    //TweenMax.to($('.target.open').not(target), .1, {display:'none', y:'0%', autoAlpha:0});
    TweenMax.to($('.reveal-recipient.open').not(target), .3, {display:'none', yPercent:'-100%',x:'0%', autoAlpha:0});
    //remove open class from target elements that are now hidden
    $('.reveal-recipient.open').not(target).removeClass('open');
    $(targetContainer).delay(300).hide(0);
  }
  
  //if this element is now active
  if($(this).hasClass('active')) {
    //show current target element
    animation.play();
    //indicate that this target class element is now open
    target.addClass('open');
    $(targetContainer).show(0);
  }
  //if the element is no longer active
  else {
    //hide the target
    TweenMax.to(target, .3, {display:'none', yPercent:'-100%', x:'0%', autoAlpha:0});
    //remove open class from newly hidden target element
    target.removeClass('open');
    $(targetContainer).delay(300).hide(0);
  }
  
});

See the Pen pEqNoz?editors=0010 by modermo (@modermo) on CodePen

Link to comment
Share on other sites

Hello majofski and Welcome to the GreenSock Forum!

 

That is a alot of code to go through. I see that in some places your using GSAP and then others you are using jQuery hide(). So by using jQuery hide() you are changing CSS properties, in this case display:none, outside of GSAP. You should replace your jquery hide() with using GSAP set() method to set display:none.

 

For example i see in your code that you animate a to() tween with autoAlpha 0 .. which will animate the opacity to 0 and make visibility hidden after the tween completes. And then sets display to none. But then right after that you are calling jquery hide() on that same element that you told GSAP to make display none. So there are a lot of things being done that are using GSAP to set or animate to() some CSS property, and then you try to set again with jQuery.

 

Using GSAP set().. so you have this in jQuery:

// this in jquery
$('.reveal-recipient-container').hide();

//becomes this in GSAP using set()
TweenLite.set('.reveal-recipient-container', {display:"none"});

GSAP set() is just a zero based tween.. no duration parameter.

 

set(): http://greensock.com/docs/#/HTML5/GSAP/TweenLite/set/

 

Also you should just remove all the display:none and display block properties from your tweens and CSS. And just use autoAlpha. First get your animation working without all the jquery hide() methods and the display none and display block from your tweens.

 

Once you have it working without display none. Then you can add it back later once you get your animation fade in and out working,

 

CSSPlugin Docs: http://greensock.com/docs/#/HTML5/GSAP/Plugins/CSSPlugin/

  • autoAlpha
    Identical to opacity except that when the value hits 0 the visibility property will be set to "hidden" in order to improve browser rendering performance and prevent clicks/interactivity on the target. When the value is anything other than 0, visibility will be set to "inherit". It is not set to "visible" in order to honor inheritance (imagine the parent element is hidden - setting the child to visible explicitly would cause it to appear when that's probably not what was intended). And for convenience, if the element's visibility is initially set to "hidden" and opacity is 1, it will assume opacity should also start at 0. This makes it simple to start things out on your page as invisible (set your css visibility:hidden) and then fade them in whenever you want.
//fade out and set visibility:hidden
TweenLite.to(element, 2, {autoAlpha:0});

//in 2 seconds, fade back in with visibility:visible
TweenLite.to(element, 2, {autoAlpha:1, delay:2});

:)

  • 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...