Jump to content
GreenSock

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

Ignore/skip in reverse()

Recommended Posts

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.

Link to post
Share on other sites

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

 

 

 

  • Like 6
Link to post
Share on other sites

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.

Link to post
Share on other sites

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.

  • Like 2
Link to post
Share on other sites

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.

Link to post
Share on other sites

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.

Link to post
Share on other sites

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

 

 

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

×