Images Just Blink Instead of Staying Opaque

[PAGzZz]

Hi I'm new to GSAP and having trouble to getting my images at the end of my animation to stay opaque after they animate from 0 opacity. I'm sure its a simple fix, however, I just can't put my finger on what I'm doing wrong.  I'm including a link to a codepen of what I have so far. It just displays the image alt id since I can't upload the actual images with my free codepen account but you can still get the idea of whats happening. Essentially, if I haven't gotten the point across already, I want my images to be 0 opacity until I animate them in then stay at 100% opacity. Thanks in advance if anyone can help this noob out.

 

See the Pen yObYBO by PAGzZz (@PAGzZz) on CodePen

 

EDIT: Use this codepen instead 

See the Pen NNjGbq by SnapToPixels (@SnapToPixels) on CodePen

[retropunk]

Hi there. Welcome to the GSAP forum. I am sure Carl and gang will post some helpful starter links on GSAP and CodePen.

In the mean time take a look

See the Pen NNjGbq by SnapToPixels (@SnapToPixels) on CodePen

 

1. You don't need to define the body tag in the HTML

2. scripts should be imported via the Pen Settings panel

3. Also, something I like to do with banners is set the visibility to hidden on the wrapper div and then at the beginning of the GSAP timeline I set the visibility back to visible. It helps with the flicker too.

 

Hope that helps in the mean time.

Here are some other links too:

GSAP Getting Started

http://greensock.com/get-started-js

 

Here is a nice CodePen starter you can fork

See the Pen PZdNMG by GreenSock (@GreenSock) on CodePen

 

I would also look at the GSAP CodePens. There are tons of easy to learn pens

 

Good luck!

- P

[PAGzZz]

Thanks for responding! I figured it out finally, it ended up being an issue with the z-index, not the animation itself.

[retropunk]

haha, I guess I misread your post and fixed everything BUT that