Jump to content
Search Community

reset values for multiple 'from' commands

friendlygiraffe test
Moderator Tag

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, I was wondering how I would go about resetting a group of elements before another 'from' command is fired?

 

I don't want the y:"-=20px" tween to be initialized when starting the timeline, and when they are animated from y, I want them to start from the original x.

 

I've tried a .set command but didn't work for what I want.

See the Pen gEQGZx by friendlygiraffe (@friendlygiraffe) on CodePen

Link to comment
Share on other sites

I was a bit confused by the question too. immediateRender:false would be the way to get the y position tween to wait. I'm not understanding the x position set(). You want the circles to jump back to the starting point before the y position tween? Like this?

 

See the Pen bZQaRd by PointC (@PointC) on CodePen

PS I'd always recommend the latest version of GSAP (2.1.2 currently). You were using 1.18.4.

  • Like 2
Link to comment
Share on other sites

23 minutes ago, PointC said:

I was a bit confused by the question too. immediateRender:false would be the way to get the y position tween to wait. I'm not understanding the x position set(). You want the circles to jump back to the starting point before the y position tween? Like this?

 

See the Pen bZQaRd by PointC (@PointC) on CodePen

PS I'd always recommend the latest version of GSAP (2.1.2 currently). You were using 1.18.4.

This is exactly what I wanted to achieve. Sorry for the confusion. I had tried immediateRender:false, but only in the Timeline, not individual tweens

 

Would I have to specify the x value in .set? Just checking there isn't an initialise/reset properties method. I looked into ClearProps but didn't get very far

Link to comment
Share on other sites

clearProps works on your from() tweens, but visually, you won't see anything happen. If you start at x:0 and tween from x:300 and then clearProps, your element will be at 0 because the inline styles are gone and your starting point was 0. Here's a really quick example:

 

See the Pen WmYMdd by PointC (@PointC) on CodePen

One box is to() x:500 and the other is from() x:500. After the tweens complete, box 1 has style="transform: matrix(1, 0, 0, 1, 500, 0);" and box 2 has style="transform: matrix(1, 0, 0, 1, 0, 0);"

 

When we clearProps, the inline styles are removed from both, but the only one that visually jumps is box 1. Make sense?

  • Like 2
Link to comment
Share on other sites

Thanks, that's closer to what I mean, but here's a better example.  https://codepen.io/friendlygiraffe/pen/RdEWXJ

 

I want the animation at the "end" label to retain the alpha as it would if immediateRender was true.

 

is is this possible without changing the last animation to a staggerTo?

 

Thanks again

Link to comment
Share on other sites

I'm not sure I completely understand the desired behavior here, but here's a fork of your pen. I've used clearProps on the x property only instead of all and used a staggerTo() for the autoAlpha.

 

See the Pen wORdXe by PointC (@PointC) on CodePen

Is that what you need it to do or I am I not understanding the question?

 

Happy tweening.

 

  • Like 3
Link to comment
Share on other sites

That is exactly how it is supposed to animate, but I was trying to keep the end Tween in one line.

The first tween has the luxury of being on one line:

 

tl.staggerFrom(".circle", 1, {x:300,autoAlpha:0}, 0.2);

 

Whereas the end tween require 2 lines:

 

tl.staggerFrom(".circle", 0.5, {y:"-30px", immediateRender:false}, 0.2, "end");
tl.staggerTo(".circle", 0.5, {autoAlpha:0.5}, 0.2, "end");

 

If this is the correct way of doing it then that's fine, I just thought I might be missing a trick. Thanks!

Link to comment
Share on other sites

If you're trying to condense it to one line, I'd probably set() the x and y position instead of using clearProps and then change the last line to a staggerTo(). Maybe something like this:

 

See the Pen RdEZgq by PointC (@PointC) on CodePen

 

It can sometimes be tricky to use from() tweens in the middle of a timeline. A set() and to() tween can make things a bit easier to control. Happy tweening.

  • Like 3
Link to comment
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.
×
×
  • Create New...