using jquery functions + gsap

[Eugene Rayner]

Hello!
I can't create a codepen because I have too many scripts that I can't load in.
 
Essentially, I have a container. In this container I want to show and hide another container which has different content when you click the 'next' button... and I want to use gsap staggerFrom to hide the elements and then staggerTo to show the next element.
My problem is that I am not sure how I can use jQuery show() and hide() functions with gsap. I don't really want to resort to using position: absolute. 

 

Here is my html:

 

<div id="questions-container">
       <!-- range slider template -->
        <section id="section1">
            <div class="container">
                <div class="row">
                    <div class="col-sm-12 text-center">
                        <h1 class="animated">Q1</h1></div>
                    <div class="col-sm-12 text-center">
                        <form class="animated">
                            <input id="slider1" type="text" data-slider-ticks="[1, 2, 3]" data-slider-ticks-labels='["<p><b>Minimum</b></p>", "<p><b>Medium</b></p>", "<p><b>Maximum</b></p>"]' data-slider-step="1" data-slider-value="1" data-slider-tooltip="hide" />
                        </form>
                    </div>
                    <div class="co-sm-12 text-center animated">
                        <button class="button">Start the Questionaire</button>
                    </div>
                </div>
            </div>
        </section>

        <section id="section2">
            <div class="container">
                <div class="row">
                    <div class="col-sm-12 text-center">
                        <h1 class="animated">Q1</h1></div>
                    <div class="col-sm-12 text-center">
                        <form class="animated">
                            <input id="slider2" type="text" data-slider-ticks="[1, 2, 3]" data-slider-ticks-labels='["<p><b>Minimum</b></p>", "<p><b>Medium</b></p>", "<p><b>Maximum</b></p>"]' data-slider-step="1" data-slider-value="1" data-slider-tooltip="hide" />
                        </form>
                    </div>
                    <div class="co-sm-12 text-center animated">
                        <button class="button">Next Question</button>
                    </div>
                </div>
            </div>

        </section>

        <section id="section3">
            <div class="container">
                <div class="row">
                    <div class="col-sm-12 text-center">
                        <h1>Q3</h1></div>
                    <div class="col-sm-12 text-center">
                        <input id="slider3" type="text" data-slider-ticks="[1, 2, 3]" data-slider-ticks-labels='["<p><b>Minimum</b></p>", "<p><b>Medium</b></p>", "<p><b>Maximum</b></p>"]' data-slider-step="1" data-slider-value="1" data-slider-tooltip="hide" />
                    </div>
                </div>
            </div>

        </section>
   </div>

 

 

Here is my JS

 

var question1 = $('#section1');
var question2 = $('#section2');
var question3 = $('#section3');

question2.hide();
question3.hide();

var question1Button = $("#section1 .button");

//-- show next container --//
question1Button.on('click', function () {
    
    console.log("I am being clicked");
    
    TweenMax.staggerTo("#section1 .animated", 2, {opacity: 0})
    question1.hide();
    question2.show();
    TweenMax.staggerFrom("#section2 .animated", 2, {opacity: 0}, 2, "-=0.5")
    
});

 

I was using timelineMax but I couldn't put the hide/show functions in there so now I am stuck.

 

Any help is greatly appreciated!

[Eugene Rayner]

Solved my own problem using setTimeout

TweenMax.staggerTo("#section1 .animated", 2, {opacity: 0}, 2, "-=0.5")
    setTimeout(function(){
        question1.hide();
    },6000)
    setTimeout(function(){
        question2.show();
        TweenMax.staggerFrom("#section2 .animated", 2, {opacity: 0}, 2, "-=0.5")
    },6000)

)};

However, if anyone knows anything cleaner, please do tell!

[OSUblake]

I can't create a codepen because I have too many scripts that I can't load in.

 

It's really hard to give to give advice without a demo. We don't need to see all your code. Just a small, isolated example that clearly demonstrates your issue. It'll save you and other people looking at your question a lot of time.

 

What i can tell you is that using setTimeout is a really bad idea for animations. I was just telling somebody about that yesterday.

https://greensock.com/forums/topic/16240-restart-timeline/?p=71477

 

If you're wondering about the switching tab issue, check out this demo.

See the Pen YNKVxG by rachsmith (@rachsmith) on CodePen

 

The fireworks are launched using setTimeout. Not so much of an issue while you are looking at it. Now leave that running in the background for like 5-10 minutes, and then switch back to that tab. BOOM!!! I had that running for several hours, and it nearly killed my computer when switched back to it.

 

I'm also wondering about your need to use to jQuery show/hide? There is nothing special about them. All they do is set display on an element to none or block, so why not use GSAP for that? And you can add functions to timelines.

question1Button.on('click', function () {
    
  console.log("I am being clicked");    
   
  var tl = new TimelineMax()
    .staggerTo("#section1 .animated", 2, {opacity: 0})
    .add(function() {
      console.log("I'm about to do a show/hide without jQuery");
    })
    .set(question1, { display: "none" })
    .set(question3, { display: "block" })
    .staggerFrom("#section2 .animated", 2, {opacity: 0}, 2)    
});

Does that should point you in the right direction?

 

And you should probably create your animations outside of your click handler. If somebody clicks really fast, it's probably going to mess up your animations.

 

.