Jump to content
GreenSock

POG

How to skip a single stagger element?

Recommended Posts

Hi together, 

 

i only wanted to know how it's possible to manipulate/skip a single stagger element, which was already defined on a whole stagger object.

The thing is, i have to stagger objects inside a timeline.

The stagger runs through around 14 objects, start to make them move and after they're in move the playhead is jumping directly to the fadein. Doing a single stagger which different times and props i'm not aware of.

Most of the objects fadein to autoAlpha 1 but 1 one of them should be manipulated further later on and the single asset need to fade only to .25. So my question is how is the best solution to manipulate that property.

I'm not sure at the moment how to change/overwrite a prop onStart, or to exclude a single dom object by class name instead of an array not:filter.

This is a raw in between code by me, but maybe it gives an idea what i try to figure out.
Thx Peter

 

const contact_profile = '.hero-home-introduction__contact-profile';
const female_02 = '.hero-home-introduction__female-02';
 
let tl_home_introduction = gsap.timeline();
 
// Scene 1 - Show conversation
const tl_scene_1 = gsap.timeline({ id: "Scene 1"})
tl_scene_1.to(contact_profile, {
duration: 5,
y: '-=20',
stagger: {
each: .5,
from: 'random',
delay: -.5,
repeat: -1,
yoyo: true
},
ease: "power1.inOut",
delay: .2
});
tl_scene_1.to(contact_profile, {
duration: 2,
autoAlpha: 1,
stagger: {
each: .2,
from: 'random',
onStart() {
let className = this.targets()[0].getAttribute('class');
if (className === 'hero-home-introduction__contact-profile hero-home-introduction__female-02') {
// Overwrite here
// Or
}
}
}
},14);
// tl_scene_1.to(female_02, { duration: 2, autoAlpha: .25},15);
 
tl_home_introduction.add(tl_scene_1);
tl_home_introduction.play(14);



 

Link to comment
Share on other sites

Hey @POG,

 

If you set e.g. ball [3] to opacity: 0.25 you could use a from tween.
I hope I understood your question correctly.
Otherwise present a reduced CodePen with your case.
By the way: if you set a tween repeat: -1, it runs infinitely, the next tween will not start!

 

See the Pen xxZRgme by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

  • Like 1
Link to comment
Share on other sites

Hey Peter. I think the easiest solution would be to use a functional value for your autoAlpha property that you're tweening to:

autoAlpha: i => i === 5 ? 0.25 : 1,

In the case above I assume that the element you want to have a different value is the 5th element in the list of targets provided.

  • Like 1
Link to comment
Share on other sites

Hey Zach,

 

It's a wonderful human attitude: life is colorful and presents different solutions.

happy moderating ..

Mikel

Link to comment
Share on other sites

Hi Mikel, hi Zach,

 

thanks for the reply. @mikel Yes in general i understand your example, but what i do is having a larger animation where multiple dots hovering slowly around and three of them (which are in the stagger object by now) should break out at some time and animate differently and the others can continue during the animation.

I'm still in the middle of testing some things ...

@ZachSaucier I'm not sure if i understand it correctly. Where would you put that, directly at the property setting? Does it cycle through all instances of the array? Would you set that directly at the value? Is that option documented somehow, would like to know more about it.
@mikel With that kind of code (It feels not right) i was able to to check on start the element i want to autoalpha differently. But i have the feeling, theres a better approach, i added roughly an onComplete and killed the the tweening, which allowed me to stop the tweening also from the stagger setting. But i'm really not sure, if that is a good direction.
 

tl_scene_1.to(contact_profile, { 
  duration: 2,
  autoAlpha: 1,
  stagger: {
    each: .2,
    from: 'random',
    onStart() {
      let className = this.targets()[0].getAttribute('class');
      if (className === 'hero-home-introduction__contact-profile hero-home-introduction__female-02') {
        gsap.to(this.targets()[0], { 
          duration: 2,
          autoAlpha: 1,
          onComplete() {
            gsap.killTweensOf(female_02);
          }
        });
      }
    }
  }
}, 14);
 

 

For a better understanding, this is an excerpt of the animation dots. The one with full opacity is the one which i stopped to continue to animate it.
The other dots continue to move further ...

 

image.thumb.png.41e701e243ee496024055d69cf27358b.png

Thanks, Peter

Link to comment
Share on other sites

13 minutes ago, POG said:

Where would you put that, directly at the property setting?

Yep, replacing autoAlpha: 1.

 

13 minutes ago, POG said:

Does it cycle through all instances of the array?

It runs the functional logic for each target and expects a return value (for autoAlpha it expects a number).

 

14 minutes ago, POG said:

Is that option documented somehow, would like to know more about it.

Different places mention it. Here's a quick tip focused on it:

 

  • Like 2
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.
×