Slickslider and gsap active and inactive slide behaviour

[azullian]

I'm trying to use slickslider in collaboration with gsap for all the extra features slick has to offer.

What could be best practice to hide all slide elements on non-active slides ? 

 

I tried to query them all on line 112 and adding them to the mastertimeline but this seems bad practice and deliveres undesirable results (janky, can't get it fixed with split text, gsap can't find certain items)

Slick provides a 'slide-current' class with which i query the active slides and have managed to get the animation part going for just the active slide. 

 

I'm struggelig with

- settings opacity 0 for all items whithin all slides untill the animation starts and the slide is active (when dragging the content of the next slide should be invisible)

- furthermore with this approach in codepen i notice splittext keeps nesting upon every slide, i'm trying to style the period (color:red in styles) at the end of the title but can't get consistent behaviour and this seems like bad practice. In stead of trying to reach the last child in css, are there other methods in gsap/splittext i could use te get this result ?

 

Any help would be appreciated

 

 

See the Pen gOMprYO by keproost (@keproost) on CodePen

[ZachSaucier]

Hey kevp. 

 

A few notes:

• It's often best to split the text and create all of your animations at the beginning and then use control methods to control them when need be. I talk more extensively about how to do that in my article about animating efficiently. 
• You're using a mix of old and new GSAP syntax. We highly recommend using the new syntax:
• I also recommend reading through the most common GSAP mistakes post:
• I'm not really understand the purpose of a master timeline in your case. It seems like you just want to fire an animation when a slide exits and enters, right?
• If you just wanted to use GSAP for the sliding then you can. There are a lot of threads that show people making sliders with GSAP.