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

Great reply Zach, thanks! This definetly points me in the right direction!

Hi guys, First post here, to be complete i'll give you some framing. I'm a ux/ui designer hence i don't have a lot of hardcore experience with JS and i struggle with basic structures way too long. I've created quite some independent effects and just read about the gsap.effects method. Doh! I see some great and clear examples here but how to go about with effects that involve scrolltirgger and splittext ? In awe with the amount of great posts here, awesome community!