Create timeline for all steps in form

[mk1]

Hey,

 

another quick question, I've encountered such funcionality of creating timeline to manage all elements in single html element, but as it often happen when I actually need it I can't find it.

 

I have a form which has multiple steps (distraction free form):

<form>

<div class="step">

...some inputs here

</div>

<div class="step">

...some inputs here

</div>

<div class="step">

...some inputs here

</div>

<div class="step">

...some inputs here

</div>

</form>

Every step will have same In and Out animation.

 

My question is:

 

Better to create timeline based on number of steps or just attach In Tween and Out Tween to every step?

I want to create reusable function that can be applied to multiple forms with different number of steps. 

 

Looking forward to hear some more awesome tips from you )

[PointC]

If I understand the question correctly, I'd create one timeline and use labels to control how the user accesses each part of the form. Others may have different opinions, but that's my 2 cents worth.

 

Happy tweening.

[mk1]

I think I just did it:

var TlForms = new TimelineMax({paused: false});

!function () {
    var stepsArray = document.querySelectorAll('form .step');



    //Steps transitions
    for (var i = 0; i < stepsArray.length; i++) {
        stepsArray[i].id = 'step' + i;

        if (i === 0){
            TlForms.add(TweenMax.staggerFrom('#step'+i, 1, {autoAlpha: 0, delay: 1}));
        }else{
            TlForms.add(TweenMax.to('#step'+(i-1), 1, {autoAlpha: 0, y: '+=50'}));
            TlForms.add(TweenMax.staggerFrom('#step'+i, 1, {autoAlpha: 0, y: '-=50'}));
        }
        TlForms.addPause();

    }

}();

However after adding this line before TlForms.addPause();

TlForms.add(TweenMax.staggerFrom('#step'+i + ' ' + '.step__section', 0.4, {autoAlpha: 0, y: '-=50', ease: Elastic.easeOut.config(1, 0.3)}, 0.3, "Steps section animation"));

I am receiving the following error:

TweenMax.js:351 Uncaught TypeError: onCompleteAll.apply is not a function
    at TweenMax.finalComplete (TweenMax.js:351)
    at TweenMax.p._callback (TweenMax.js:6496)
    at TweenMax.p.render (TweenMax.js:317)
    at TimelineMax.p.render (TimelineMax.js:317)
    at Object.p.render (TweenMax.js:6784)
    at Object.Animation._updateRoot.TweenLite.render (TweenMax.js:7049)
    at Object.p.dispatchEvent (TweenMax.js:6208)
    at _tick (TweenMax.js:6260)

, but everything works just fine... 

[mk1]

After switching to:

TlForms.add(TweenMax.from('#step'+i + ' ' + '.step__row-content__head', 0.4, {autoAlpha: 0, y: '+=50', ease: Back.easeOut.config(1.7)}, 0.3, "Steps section animation"));
            TlForms.add(TweenMax.from('#step'+i + ' ' + '.step__row-content__subheader', 0.4, {autoAlpha: 0, y: '+=50', ease: Back.easeOut.config(1.7)}, 0.3, "Steps section animation"));
            TlForms.add(TweenMax.from('#step'+i + ' ' + '.step__row-content__body', 0.4, {autoAlpha: 0, y: '+=50', ease: Back.easeOut.config(1.7)}, 0.3, "Steps section animation"));
            TlForms.add(TweenMax.from('#step'+i + ' ' + '.step__row-content__footer', 0.4, {autoAlpha: 0, y: '+=50', ease: Back.easeOut.config(1.7)}, 0.3, "Steps section animation"));

Error disapeared

[PointC]

Glad to hear you got it all working. Good luck on your project.

 

Happy tweening.