Issue with GSAP Animation

[Dr3am3rz]

I am doing an envelope animation using GSAP, been facing quite a lot of issue but couldn't find much help online.

I am trying to make some animations to 1) rotate from the front of the envelope to back of the envelope, 2) opening of flap and 3) a letter coming out from an envelope.

Currently I am on step 3 now and struggling with "looks like z-index" issue but I am not sure whether is it because of z-index. Somehow I could not get the letter to overlay on top of the flap opening.

Hope you guys can help me out.

Thanks in advance.

See the Pen EgdPOX by Dr3am3rz (@Dr3am3rz) on CodePen

[Jonathan]

Hello Dr3am3rz and Welcome to the GreenSock Forum!

 

This looks more of a question on CSS layout and positioning, then a GSAP API question.

 

But what is happening is due to the order of your elements in the DOM and the way some of your parts are nested. I tried to work with your existing markup. But if i was creating this i would have set it up way differently and you wouldn't need to duplicate div groupings and or change z-index

 

Working example:

 

See the Pen bwmAGx?editors=1000 by jonathan (@jonathan) on CodePen

 

I had to change the following

 

In CSS Panel:

• .back2 on line 47 .. z-index from 20 to 200
• .card on line 112 .. z-index from 10 to 100

In JS panel:

• on line 16 i changed opacity to autoAlpha
• on line 22 I made it so there are 2 separate tweens one animates opacity and the other top.
  so i changed this
  

  .to($card, 1, {opacity: 1, top: -100}, 1);
  

  to this (note i use the position parameter.. see below video):

  .to($card, 1, {autoAlpha: 1}, "-=1") // adds relative tween that starts 1 second before previous tween
  .to($card, 1, {top: -100}, 1);
  

In HTML panel:

• I had to copy .envFace.back.back2 div so it was also before the .card div.

Quick Note:

 

Regarding autoAlpha above. That is part of the GSAP CSSPlugin:

 

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

Also keep in mind you should animate y instead of top.  CSS position offsets like top, left, right, and bottom will not animate smooth whereas transforms are better for animating. CSS position offsets are only best when setting up your initial elements. But then you use transforms to animate your elements after that.

 

Please see this article by GreenSock's Jack:

 

https://css-tricks.com/myth-busting-css-animations-vs-javascript/

 

Resources:

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

CSS Position offsets: https://developer.mozilla.org/en-US/docs/Web/CSS/position

 

Position Parameter:

 

 

Sequencing Tweens and Timeline:

 

 

[Dr3am3rz]

Hi Jonathan,

 

Thanks for your help!

 

Noted on the alpha and I have also changed to animate y instead of top.

 

I saw your working example but it is still the same issue that I am facing, the letter is still being overlapped by the top flap.

 

Logically, the letter should be overlapping the top flap when it slides out just like how we take out the letter from an envelope in real life.

 

Not sure if you get what I mean.

[Dr3am3rz]

Hi Jonathan,

 

I think I got it to work.

 

It's just 1 stupid line which I took till now then realized that. -.-"

 

I need to set the div wrapper for top flap z-index to 0 when the top flap is open. lol

 

Thanks for your help anyway! =D