Jump to content
Search Community

sequence of binary state changes in 'To' tweens, i.e. visibility

ripmurdock test
Moderator Tag

Go to solution Solved by PointC,

Recommended Posts

I'm just getting started with GSAP.

 

It appears these lines are not being executed in the order I expected.

 

I expected the visibility state change to 'hidden' in the last 'To' tween to occur at the end of the 'To' tween's duration, but it appears to be happening at the beginning of the 'To' tween.

 

The timing of the state change appears to be unaffected by the duration of the 'To' tween.

 

Any clarification regarding how green sock is interpreting the timing of these state changes would be helpful.

 

var fd_aperture_tl01 = gsap.timeline();
var fd_frametime = 0;
var fd_vistime = 1;
var fd_holdtime1 = 5;
fd_aperture_tl01.to(".FD_vis0-12_cl-000", {duration: fd_frametime, visibility: "visible"});

fd_aperture_tl01.to(".FD_vis0-12_cl-12", {duration: fd_vistime, visibility: "visible"});
fd_aperture_tl01.to(".FD_vis0-12_cl-06", {duration: fd_vistime, visibility: "visible"});
fd_aperture_tl01.to(".FD_vis0-12_cl-12", {duration: fd_frametime, visibility: "hidden"}, "-=" + fd_vistime);
fd_aperture_tl01.to(".FD_vis0-12_cl-01", {duration: fd_vistime, visibility: "visible"});
fd_aperture_tl01.to(".FD_vis0-12_cl-06", {duration: fd_frametime, visibility: "hidden"}, "-=" + fd_vistime);

fd_aperture_tl01.to(".FD_vis0-12_cl-01", {duration: fd_holdtime1, visibility: "hidden"});

 

See the Pen popKxKE?editors=0011 by ripmurdock (@ripmurdock) on CodePen

Link to comment
Share on other sites

"visibility" is not a property that has any valid intermediate steps it is either "visible" or "hidden", so I'm a little confused about why you're even trying to tween that. It will set it to the new state immediately (except if it's "display"). Are you trying to animate the opacity? If not, you can just do simple .set() calls at whatever spots in the timeline that you want. Use the position parameter to put them wherever you need. 

  • Like 2
Link to comment
Share on other sites

Thanks for your help.

I was able to get the sequence to mostly work using ‘to’ tweens with zero duration and a stagger.  It wasn’t clear to me from the document page if ‘set’ supports stagger.

I still have a couple of issues.  The sequence appears to leave the first (01) and last (12) svg’s both visible about every 13th time it's repeated.  It gets stuck with two svg's visible, like this:

https://cat-com.w3spaces.com/error1.jpgimage.png.48849cadfb1fa3da6058c7ddb4930ee1.png

 

Also, I tried to add easing to the timeline with this syntax:

masternumbers.to(NUM1Timeline, 3, {progress:1, ease:Power2.easeIn});

from this topic,

https://greensock.com/forums/topic/15455-adding-ease-to-timeline-progress/

but it appears the three parameter ‘to’ syntax might be obsolete.

I also tried adding easing to the timeline with a two parameter ‘add’ method, but the easing doesn’t appear to be updating:

t2.add(t1, {ease: "sine.inOut"});

Here's the codepen with the zero duration 'to' with stagger syntax:

See the Pen GRyBBER?editors=0010 by ripmurdock (@ripmurdock) on CodePen

 

Thanks again.

 

error1.jpg

Link to comment
Share on other sites

You can use a stagger with set. Here's an answer from a different thread showing the technique.

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

 

I'm not following your question about easing a timeline as I'm not seeing that in your demo. Maybe you could break the demo down into smaller pieces so we can more easily assist you.

 

Just FYI - I'd create that whole thing in one SVG rather than the fourteen you have now. It would make your life much easier without needing to set position absolute and stacking all of them. 

  • Like 4
Link to comment
Share on other sites

 

Thanks.  I'll put together a shorter version to test adding easing to the timeline.  The example from the forum above nests the timeline and adds easing parameters, although it wasn't clear from the documentation what property middle parameter controls.

 

I tried a couple of different syntaxes in the fd_aperture_tl01 function below, but the easing term appears to have no effect.

//t2.to(t1, {ease: "sine.inOut"});
  t2.add(t1, {ease: "sine.inOut"});

 

from the JS section of the codepen:

function fd_aperture_tl01() {
  var t1 = gsap.timeline();
  var t2 = gsap.timeline();
 
    t1.to(".FD_vis_ap_cl-2", {duration: fd_frametime, visibility: "visible", stagger: fd_framedur});
  t1.to(".FD_vis_ap_cl-2", {duration: fd_frametime, visibility: "hidden", stagger: fd_framedur}, "<+=" + fd_framedur);
    t1.to(".FD_vis0-12_cl-01", {duration: fd_frametime, visibility: "visible"});
  //t2.to(t1, {ease: "sine.inOut"});
  //t2.add(t1);
  t2.add(t1, {ease: "sine.inOut"});
  t2.yoyo(true).repeat(3).repeatDelay(fd_holdtime1);
  return t2;
}

Link to comment
Share on other sites

When you add() you have two parameters

1. What are you adding? Tween, Timeline, Label, etc.

2. The position parameter

https://greensock.com/docs/v3/GSAP/Timeline/add()

 

t2.add(t1, {ease: "sine.inOut"});

This doesn't simply add a new ease to timeline 1. 

 

Here's a stripped down example of a parent timeline tweening the progress of a child.

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

 

See how the child timeline has a duration of 1 second, but now I've handed control to the parent and really upped the duration to make it obvious. We're just tweening the progress of the child. You can do other things like the timeScale() or time(). You can also see how the power4 ease is obvious when tweening the progress, but notice the child timeline tweens have no ease at all.

 

I'm honestly not sure why you're tweening timelines with other timelines in this case. It seems like it would be a straightforward single timeline. 

  1. Reveal the cursive text.
  2. Lens aperture stagger
  3. Reveal the word photo. 

But maybe I'm missing something. 

  • Like 5
Link to comment
Share on other sites

Thanks for your help.

 

I was able to apply an ease to the parent timeline by also defining a duration and a progress with this syntax:

t2.to(t1, {duration: 0.5, progress: 1, ease: "power4.inOut"});

 

Here's a simplified version of the sequence:

See the Pen MWrPQRY?editors=0010 by ripmurdock (@ripmurdock) on CodePen

 

When I added a repeat with yoyo to the parent timeline, I expected the first tween of the child timeline to be executed last when the repeat value is an odd number, but the parent timeline always appears to end with the last tween of the child timeline.

 

I tried a few different variations with the basic parent timeline tweening child timeline, which I forked here:

See the Pen XWVyJVP by ripmurdock (@ripmurdock) on CodePen

 

It looks like tweens added to the child timeline after the parent timeline is defined are included within progress = 1 and the duration and ease are defined by the parent timeline.

 

I haven't been able to figure out how repeats on the parent or child timeline are interpreted.  In the basic example I wasn't able to get the parent timeline with yoyo to finish at the starting tween for any number of repeats. 

 

Each yoyo repeat value I tested ends with the sequence being played forward with the final forward sequence executed with the parent parameters for even number repeats and without the parent parameters with odd number repeats.

 

If I set parent yoyo to true, with 0 repeats I get:

1: child timeline with parent parameters forward

 

If I set parent yoyo to true, with 1 repeat I get:

1: child timeline with parent parameters forward,

2: child timeline with parent parameters in reverse,

3: child timeline without parent parameters forward

 

If I set parent yoyo to true, with 2 repeats I get:

1: child timeline with parent parameters forward,

2: child timeline with parent parameters in reverse,

3: child timeline with parent parameters forward

 

If I set parent yoyo to true, with 3 repeats I get:

1: child timeline with parent parameters forward,

2: child timeline with parent parameters in reverse,

3: child timeline with parent parameters forward

4. child timeline with parent parameters in reverse,

5: child timeline without parent parameters forward

 

Also, using index values in conjunction with stagger looks useful, as demonstrated in this tutorial:

https://css-tricks.com/tips-for-writing-animation-code-efficiently/

 

Are these javascript default arguments?

1 The index   2 The specific element being affected   3 An array of all of the elements affected by the tween

 

Or do these argument defaults take effect any time GSAP is referenced above the function declaration and no argument is passed for the 1st, 2nd, or 3rd parameter respectively?

 

Thanks again!

 

 

 

Link to comment
Share on other sites

  • Solution
1 hour ago, ripmurdock said:

I was able to apply an ease to the parent timeline by also defining a duration and a progress with this syntax:

t2.to(t1, {duration: 0.5, progress: 1, ease: "power4.inOut"});

That looks correct.

 

Your repeats seem odd because you tween the progress of the child from 0 → 1 and then  1 → 0. At that time the child is back to the beginning so it naturally plays if it isn't paused. (using the normal durations and eases) I did not have the child paused in my first example so that may have been confusing, but I was only tweening the progress to 1 so it was already at the end and couldn't play again. I've paused it now for clarity.

 

I wouldn't recommend adding tweens to a child timeline after you've added the child to a parent as that could give some odd results. Either add more tweens to the child before you add it to the parent or make a second child.

 

You can use the index to create some conditional logic for the tweens (like in the referenced article). Function based values are pretty powerful animation techniques.  But you don't necessarily need the index and element as GSAP also has baked in randomizing too so you can do something like this.

gsap.to(yourTargets, {
  duration: 1,
  y: "random(-100, 100, 5)"
});

I'd recommend the getting started guide

 

Our own @Carl has a wonderful course here:

https://www.creativecodingclub.com/courses/FreeGSAP3Express?ref=44f484

 

Have fun.

  • Like 2
Link to comment
Share on other sites

Thanks.  I was able to stop the extra forward firing of the child timeline and have a yoyo'ed timeline with an odd number of repeats end at the starting point by adding Pause(0) to the child timeline.

I wasn’t able to find a property that gets the current repeat count, so I tried instead using a negative stagger in order to run the animation at different lengths forwards and backwards.

I ran into a different issue combining functions with a negative stagger, so I’ll post a separate topic, in case anyone sees similar results.

Thanks again.

Link to comment
Share on other sites

Yes, thanks.  Iteration is the property I was searching for.  I would have found it if it had been mentioned under the repeat, repeatDelay, or yoyo methods.  I'm not sure redoing my animation in a yoyo modified by iteration will solve the issue I encountered writing each direction separately, since it crops up in the forward version as well as the backward version.  Thanks again.

 

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...