How can I re-use a tweenmax tween in a pre-built content slider?

Question

I have a tween affecting elements multiple slides. Currently when the slider is initialized, I'm just playing the tween each time, but it's affecting the element with the targeted class in EVERY slide, not just the current slide and sometimes you can see the hidden element show up while the tween is happening.

Is there a way to set up a tween with tweenmax so that it's re-usable on elements with the same class, but not run at the same time?

The code:

<div id="slider-wrapper">
    <ul class="slides">
        <li style="background: url(http://lorempixel.com/400/200/nature/1) center center / cover no-repeat;">
            <span class="slide-text">
                <h2>Heading Text</h2>
                <h3>Subheader Text</h3>
            </span>
        </li>
        <li style="background: url(http://lorempixel.com/400/200/nature/3) center center / cover no-repeat;">
            <span class="slide-text">
                <h2>Heading Text</h2>
                <h3>Subheader Text</h3>
            </span>
        </li>
    </ul>
    <div class="slide-direction">
        <div class="prev-slide"></div>
        <div class="next-slide"></div>
    </div>
</div>
<script>
    $(document).ready(function() {

        var dropIn = TweenMax.from(".slides .slide-text", 0.75, {top: "-400px", transform: "scale(0.5)", ease: Back.easeOut.config(1)});
        $(".slides").cycle({
            // options
            slides: '>li',
            timeout: 4500,
            speed: 1450, // Transition speed. This must give the tween on the .slide-text enough time to complete the reversal out
            manualSpeed: 1450,
            next: '.slide-direction .next-slide',
            prev: '.slide-direction .prev-slide',
            pauseOnHover: true,
            swipe: true,
            swipeFx: 'fade'
        }).on('cycle-initialized', function(currSlide){
            // when the slider is fully loaded
            dropIn.play();
        }).on('cycle-after', function(currSlide){
            // when the slide transition is completed
            dropIn.play();
        }).on('cycle-before', function(currSlide){
            // just before the transition is started
            dropIn.reverse();
        });

    });
</script>

See the fiddle here

Answer 1

I found a solution. Since there is no way to re-use a tweenmax tween set by a variable (that I could find...), this is what I ended up doing:

        // Set the initialized state before the slider is initialized
        $(document).on('cycle-initialized', ".slides", function(){
            // when the slider is fully loaded
            TweenMax.fromTo(
                $(".cycle-slide-active .slide-text"), 0.75, {top: "-400px", transform: "scale(0.5)", ease: Back.easeOut.config(1)}, {top: "120px", transform: "scale(1)", ease: Back.easeOut.config(1)}
            );
        })

        var homeSlider = $(".slides").cycle({
            // options
            slides: '>li',
            timeout: 4500,
            speed: 1450,
            manualSpeed: 1450,
            next: '.slide-direction .next-slide',
            prev: '.slide-direction .prev-slide',
            pauseOnHover: true,
            autoHeight: 1,
            swipe: true,
            swipeFx: 'fade'
        }).on('cycle-after', function(){
            // when the slide transition is completed
            TweenMax.fromTo(
                $(".cycle-slide-active .slide-text"), 0.75, {top: "-400px", transform: "scale(0.5)", ease: Back.easeOut.config(1)}, {top: "120px", transform: "scale(1)", ease: Back.easeOut.config(1)}
            );
        }).on('cycle-before', function(){
            // just before the transition is started
            TweenMax.fromTo(
                $(".cycle-slide-active .slide-text"), 0.75, {top: "120px", transform: "scale(1)", ease: Back.easeOut.config(1)}, {top: "-400px", transform: "scale(0.5)", ease: Back.easeOut.config(1)}
            );
        });

Updated Fiddle