Ignore/skip in reverse()

[anteksiler 8 Likes (Newbie)]

Is there anyway we can omit some tweens when doing reverse() ?

 

I have this code

menuTl
					.set($('.header_overlay_padding', header), {marginTop: $('.logolink', header).outerHeight()})
					.to(header_overlay_menu, 0.3, { y: 0 }, "start")
					.set(header, {className: '+=light-header'})
					.staggerFromTo($('.thb-header-menu>li>a', header), 0.5, { autoAlpha: 0 }, { autoAlpha: 1 }, 0.1, 'color')
					.staggerFrom($('.thb-header-menu>li>a', header), 0.3, { color:'#fff', clearProps: 'color' }, 0.1, 'color+=0.5') ***
					.to(bar, 0.5, { cssRule: { scaleX: 1, opacity: '0.1' } }, '-=0.5' )
					.staggerFromTo($('.thb-secondary-menu-container a', header), 0.5, { autoAlpha: 0 }, { autoAlpha: 1 }, 0.1, 'subcolor')
					.staggerFrom($('.thb-secondary-menu-container a', header), 0.3, { color:'#fff', clearProps: 'color' }, 0.1, 'subcolor+=0.5'); ***

 

I would rather not animate the lines marked with *** when doing reverse.

[Sahil 2,657 Likes (Superhero)]

No you will have to use two separate timelines for reverse and play.

 

If your animation is too complex, you can create master timelines and add timelines to it using functions. Following are tutorials for complex timelines

 

 

 

[anteksiler 8 Likes (Newbie)]

Thanks, I have moved my timelines into a master timeline, and it's easier to control. However, I have an issue with position parameter of nester timelines.

 

mainTl
	.add(animation1.play(), "position")
	.add(animation2.play(), "position");

 

Now, when playing mainTL,  both animations start together, however, when using mainTl.reverse(), they are staggering. 

 

mainTL, animation1 and 2 are all paused.

[Sahil 2,657 Likes (Superhero)]

can you post a reduced code pen demo with this specific problem?

 

Following is demo that works fine on play and reverse.

 

See the Pen LOjNxM by Sahil89 (@Sahil89) on CodePen

 

If you meant, they should stagger on reverse then you can create two separate master timelines for play and reverse. One with label another without label.

[anteksiler 8 Likes (Newbie)]

You can see the issue here: http://revolution.fuelthemes.net/

 

When you click on the mobile toggle icon, the animation of the mobile icon and the menu start together. However, when clicked again (reversed), the mobile icon waits for the menu animation to finish.

[mikel 4,782 Likes (Superhero)]

Hi @anteksiler,

 

Do you want this effect?

 

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

 

Best regards

Mikel

[anteksiler 8 Likes (Newbie)]

Yes, but my question is related to this code:

 

mainTl
	.add(animation1.play(), "position")
	.add(animation2.play(), "position");

 

They start together when using (mainTl.play()), but when reversed (mainTl.reverse()), they don't start together.

[mikel 4,782 Likes (Superhero)]

Hi @anteksiler,

 

The pen of @Sahil is showing such an example - even if you take the same labels.

 

So what is your topic. A snippet is a snippet.
Please show a complete pen where we can see your progress.

 

Kind regards

Mikel

 

 

[Mohamed Refaay 1 Likes (Newbie)]

I made this workaround,

const subTween = gsap.to(".text", {
  opacity: 1,
  paused: true,
});

const mainTimeline = gsap
  .timeline()
  .to(".class", {
    opacity: 0,
  })
  .to(".something", {
    yPercent: 200,

    onComplete: () => {
      subTween.play();
    },
  });

onComplete function will only be fired when the timeline on play not on reverse. You can control the time of the sub tween using the delay property.