Opacity Problem.

[truAscention]

Hello all,

 

I'm fairly new to this. I did use to use greensock back in the days of flash, however I'm trying to learn and use it with JavaScript. 

 

So, to get started. I have a site I'm building for a client (WHMCS theme) and they want thier domain extensions to animate (fade in and up the y axis) in and out (fade out and down the y axis) for two different sets of domain extensions (5 extensions per slide). The extensions will animate up and down the y axis but the opacity isn't touched. It stays at 0 and I can not figure out why.

 

Any help would be appreciated. 

 

Thank you.

See the Pen OJNwWLK by stewart-martin (@stewart-martin) on CodePen

[ZachSaucier]

Hey truAscention and welcome to the GreenSock forums. GSAP is better than ever! We're glad you're checking it out again.

 

Once I fix all of the errors in your CodePen it animates in both the y and the opacity so it must be some conflict with another part of your website. My guess is that the opacity is not 0 by default (like it is in your pen) so it animates the opacity from a value of 1 to 1 which makes it look like it's not working. Given your pen doesn't recreate the issue it's impossible to say for sure though.

 

With that being said I would restructure your animation code to be more readable and maintainable:

See the Pen ZEWjLKX?editors=0110 by GreenSock (@GreenSock) on CodePen

 

For more on that, check out my article about animating efficiently.

[truAscention]

Hi Zach,

 

Thanks for the reply and the assist. I tried with your code and it still did not go through as expected. The y axis would animate but the opacity wouldn't so I started turning things off one by one and found there is a conflict with the slick.js slider I am using. Not exactly sure where the conflict lies.