Jump to content

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

display: "block" runs at the end of timeline

Recommended Posts

So I am running timeline to show sub-menus:

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

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




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