Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Blake

Reset the starting position of an array of elements after staggerTo() is called

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi there! I'm trying to reset the starting position of an array of elements when I replay my main timeline animation. I've tried using TweenMax.set to set the original state of each element but I'm not having much luck.

 

 var txtEffect = ["#w", "#s", "#r2", "#e", "#n", "#o2", "#v", "#l2", "#r1",  "#a2", "#l1", "#u", "#l3", "#a1", "#o1", "#f1", "#f2" ];

    function showTxt() {
    tlTxtEffect = new TimelineMax({
            paused: false,
        });
   
    // wind effect 
    tlTxtEffect.staggerTo(txtEffect, 3.75, {
        cycle: {
            top:function(){
                return Math.random() * 300
            },
            left: function(){
                return Math.random() * -700 
            },
            scale: function(){
                return Math.random() * 2 
            },
            rotationX: function(){
                return Math.random() * 20 
            },
            rotation: function(){
                return Math.random() * -360 
            } 
        },
            ease:Power4.easeOut,
            }, 0.03);

    }


Thanks in advance,
Blake

Link to post
Share on other sites

Hey guys, just solved the problem by using the below code in my replay function:
 

// resets the letters in the wind effect to their start position
tlTxtEffect.pause(0, true);


I can't believe how easy the solution was and that is why I LOVE GSAP. It was great to learn a few things along the path to this solution, but I'm literally smiling ear to ear with how easy it is to reset a complex series on animations. It's sorcery I tell ya :)

Thanks,
Blake

Link to post
Share on other sites

when you thought about using .set(), were your animation running?

Link to post
Share on other sites

The animation wasn't running when I called .set(). When I called .set() it wasn't able to properly reset all of the starting positions/properties the way I needed it to. It would have been a lot of work to set each individual element of my array back to the starting points. Thankfully the .pause() function saved the day by doing a lot of the heavy lifting.

  • Like 1
Link to post
Share on other sites

probably, you could .progress(0)/seek(0) on that animation..

set() is adding zero duration tweens.. which is somehow diverges syntactically from the intention.

  • Like 1
Link to post
Share on other sites

problem was solved a lot easier than adding any other functions. it was good to research potential solutions and learn, but it was even better to discover how easy the solution was by simply using .pause() to reset/replay my timeline.

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×