Jump to content
Search Community

display: "block" runs at the end of timeline

anteksiler test
Moderator Tag

Recommended Posts

So I am running timeline to show sub-menus:

var tl = gsap.timeline( { paused: true } );

					tl
            .to( cc, { duration: 0.5, autoAlpha: 1 }, "start")
						.to( menu, { display: 'block', duration: 0.5, autoAlpha: 1 }, "start")
						.to( li, { duration: 0.1, opacity: 1, stagger: 0.03 }, "start");

Menu is set to display: none; by default. The "display:block" is applied at the end of the animation.

  • Thanks 1
Link to comment
Share on other sites

Hey anteksiler, thanks for being a Shockingly Green member!

 

I can't reproduce this behavior that you're talking about. The display is changed at the beginning of the tween:

 

See the Pen GRRYJOB?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Please reproduce the error in a minimal CodePen so that we can see what's going on.

 

P.S. It might be better to use a .from() call. Or use visibility: hidden and autoAlpha instead. It depends on your setup/needs.

Link to comment
Share on other sites

I am also seeing this happen.

 

It does work in Codepen but not using ES6 modules. Since I can't reproduce this in Codepen, attaching a screenshot of a simple tween in the middle of tweening and you can see that display is set to none, when it should be set to block when tween starts.

 

1734320161_ScreenShot2019-11-13at2_03_15PM.png.22cbca0ad3c20dd3182d48bc9ea409f5.png

 

The code that replicates this is:

import { gsap } from 'gsap/all'

// set el to display none
el.style.display = none;
// Then run the tween
gsap.to(el, { duration: 3, display: 'block', autoAlpha: 1 });

// Expected behavior: block set immediately, then el fades in
// Observed behavior: block is set at end of tween

 

 

Link to comment
Share on other sites

On 11/13/2019 at 12:43 PM, ZachSaucier said:

I can't reproduce this behavior that you're talking about. The display is changed at the beginning of the tween:

@ZachSaucier the reason it was working for you is because you had an invalid CSS value for display - you had quotes in your CSS declaration around "none" :) So it wasn't actually display:none to start at all. 

 

The "display" behavior was indeed purposeful, as most people animate to display:none to make something vanish at the end, so it's a special case. When GSAP encounters a "display" animation, it applies the value at the end but I could add some code to only do that for display: "none". Obviously if you want to change something like that at the start of the tween, the best way to do it is either with a set() or by doing a fromTo() tween so that you can set initial values too. 

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