Jump to content
Search Community

New to GSAP - Can get fade in effect to work but not Fade out. Codepen inside!

connorv 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

hey guys, i'm new to GSAP & I'm not quite sure what I'm doing wrong here. 

 

the desired effect is a fade in when the menu opens & a fade out when it closes, but for some reason i can't get the fade out part to work. here is a link to my codepen. i suspect i'm making a pretty dumb mistake. 

 

here's my js:

var root  = document.documentElement;
var body  = document.body;
var pages = document.querySelectorAll(".page");
var tiles = document.querySelectorAll(".tile");


for (var i = 0; i < tiles.length; i++) {  
  addListeners(tiles[i], pages[i]);
}

function addListeners(tile, page, menu) {
  
  tile.addEventListener("click", function() {
    animateHero(tile, page);
  });
  
  page.addEventListener("click", function() {
    animateHero(page, tile);
  });  
}

function animateHero(fromHero, toHero) {
    
  var clone = fromHero.cloneNode(true);
      
  var from = calculatePosition(fromHero);
  var to = calculatePosition(toHero);
  
  TweenLite.set([fromHero, toHero], { visibility: "hidden" });
  TweenLite.set(clone, { position: "absolute", margin: 0 });
  TweenLite.to('.k-nav-list li', 0.6, {opacity: 0});
  body.appendChild(clone);  
      
  var style = {
    x: to.left - from.left,
    y: to.top - from.top,
    width: to.width,
    height: to.height,
    autoRound: false,
    ease: Power1.easeOut,
    onComplete: onComplete
  };

  
    

   
  TweenLite.set(clone, from);  
  TweenLite.to(clone, 0.3, style)
    
  function onComplete() {
    
    TweenLite.set(toHero, { visibility: "visible" });
    body.removeChild(clone);
    TweenLite.to('.k-nav-list li', 0.6, {opacity: 1});
  }
}

function calculatePosition(element) {
    
  var rect = element.getBoundingClientRect();
  
  var scrollTop  = window.pageYOffset || root.scrollTop  || body.scrollTop  || 0;
  var scrollLeft = window.pageXOffset || root.scrollLeft || body.scrollLeft || 0;
  
  var clientTop  = root.clientTop  || body.clientTop  || 0;
  var clientLeft = root.clientLeft || body.clientLeft || 0;
    
  return {
    top: Math.round(rect.top + scrollTop - clientTop),
    left: Math.round(rect.left + scrollLeft - clientLeft),
    height: rect.height,
    width: rect.width,
  };
}

 

the part that is actually changing the opacity for the element i want is 

TweenLite.to('.k-nav-list li', 0.6, {opacity: 0});

and

TweenLite.to('.k-nav-list li', 0.6, {opacity: 1});

but obviously i'm misunderstanding what's going on here. any help is greatly appreciated.

 

See the Pen NyYNKp by connorv (@connorv) on CodePen

Link to comment
Share on other sites

Thanks for the demo.

Please fork it and try to reduce to the least amount of code possible necessary to replicate the issue.

A simple fade in fade out shouldn't need 75 lines to reproduce.

I suspect that as you reduce it you will get closer to the conflict that is causing the problem

 

It takes too much time for a first-time viewer to look at code like

 

TweenLite.set(clone, from);  
  TweenLite.to(clone, 0.3, style)

 

then try to figure out what  from and style are

 

only to find out that we then have to find what fromHero is and

 

var from = calculatePosition(fromHero);

 

what happens to it when it gets passed into calculatePosition

 

I'm guessing you could create a simple demo with 15-20 lines of codes that can replicate the conditions that are causing the problem by removing a bunch of functions and hard-coding some values. If the problem is with an element fading in and out there is no need for code that makes something grow and move.

 

I suspect that once there is a reduced and easy to read demo we will be able to find the problem fairly quickly.

 

thanks!

 

 

 

  • Like 3
Link to comment
Share on other sites

Hi Carl, thanks for taking the time. I included the full JS as for my use case I also require that the elements move while this fade out is occurring (this part of the animation works just fine).

 

As this sort of stuff is still quite overwhelming to me, I wanted to keep that functionality there while I was working on it as I'm basically afraid of not being able to put it back together the same way if I take it all apart, or that the code won't behave the same with the full code. I'm sorry it's so much, but I hope you understand what I mean. I agree the code is very convoluted, part of the problem is I'm having trouble wrapping my ahead around all the nested functions etc myself.

Link to comment
Share on other sites

I think the issue is that you're tweening the opacity only after the menu has finished growing/shrinking... when you open it, it starts at 0 and then fades in once the menu is completely open; but when you close it, it starts at 1 and will only start fading out once the menu is closed. Additionally, judging by how the values move when monitoring them in the inspector, it looks like for both opening and closing transitions they tween from 0 to 1.

 

Echoing Carl's sentiment though, a reduced example would make it way easier to understand what's going on. I think you should make just one timeline that contains both the size change of the menu and the fade in/out of the li elements. Then you'd be able to play or reverse that timeline when appropriate.

  • Like 3
Link to comment
Share on other sites

On 2/28/2018 at 6:54 AM, Acccent said:

I think the issue is that you're tweening the opacity only after the menu has finished growing/shrinking... when you open it, it starts at 0 and then fades in once the menu is completely open; but when you close it, it starts at 1 and will only start fading out once the menu is closed. Additionally, judging by how the values move when monitoring them in the inspector, it looks like for both opening and closing transitions they tween from 0 to 1.

 

Echoing Carl's sentiment though, a reduced example would make it way easier to understand what's going on. I think you should make just one timeline that contains both the size change of the menu and the fade in/out of the li elements. Then you'd be able to play or reverse that timeline when appropriate.

 

you were right, the closing transition was occurring after the animation instead of before, and I don't think I would have figured it out if you hadn't said something. Thanks!

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