Jump to content
Search Community

Two display animations are not firing together (even with "<")

h-amad test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

Hello Greensock members :D
i am having this very strange issue that two display animation are supposed to happen at the same time but only happening after one another. 

i tried other options like (fromTo, visibility:hidden, and setting the same absolute timeline position) but they still fire after each other. 

My desired result is that green Portfolio disappear the moment the blue Portfolio shows up without the user noticing it (so at the same time)

am i doing anything wrong with the timeline animation? os are display tweens just this hard to control?

(green and blue are only to clarify that they are different divs, originally they are both green and user shouldnt notice the animation happening)

 

 

ps:

-I cant use opacity animation, it needs to be display: none 😕

- this is a page transition animation but only copied the navbar for codepen purposes.

-using webflow interaction tool, the display animations did happen at the same time but the purpose here is to make all of the animation on gsap code :D

See the Pen LYJjzXJ by hamadarabi (@hamadarabi) on CodePen

Link to comment
Share on other sites

Hey @Ali Manuel Thank you for the quick reply, I should've clarified this before, I only coloured them to show they are different divs but the purpose of the animation is that they kind of switch position (when one disappear and the the other shows up) without the user noticing any of it.

 

Link to comment
Share on other sites

Hi @h-amad,

 

The issue is that display is not a property that can be animated.

 

What you could try is having both items in the same container with absolute positioning and just do a fade in/out or a clip path animation as well. That's the approach I'd follow in this case.

 

Here is a super simple example (sorry I don't have time to convert all the CSS in your codepen to make it work, but hopefully you'll get the idea):

See the Pen WNgEzBM by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

Link to comment
Share on other sites

thank you @Rodrigo for joining,

I don't want to animate display as in setting duration or easing, i just want two display tweens to happen simultaneously, like here for example

or is this also called animating ?

this is basically doable using regular web flow interaction but i want to achieve it using only GSAP

.to(".fake-portfolio", { display: "none" })
.to(".page-title-portfolio", { display: "block"}, "<")

sorry had to make a long screenshot 😅

Screenshot 2023-03-07 at 01.47.10.png

Link to comment
Share on other sites

  • Solution

Ah, okay, so by default tweens have a duration of 0.5 (you didn't define a duration in the sample code above). And GSAP is smart enough to know that when someone "animates" the CSS property "display" to a value of "none", it should wait until the END of the tween to toggle that particular property (otherwise it'd be kinda silly to be doing animations on an element that's completely out of the document flow and invisible). If you're animating ANY other property that's not really animatable, that'll get applied at the beginning of the tween. 

 

Here's a super simple demo that also animates x so you can see that display: none waits to toggle until the end. So they're both visible during the course of the animation. That's very much by design. If you're trying to just toggle them (at the same time), you should be doing a .set() which is just a zero-duration tween. 

See the Pen XWPayPo by GreenSock (@GreenSock) on CodePen

 

Because like Rodrigo said, "display" isn't animatable anyway. So did you intend to just toggle? Why did you use a .to()? Once we understand your intent, I'm sure we'll be able to suggest a way to accomplish it. Hopefully my explanation above clears up what the issue likely was. 

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

Hi @GreenSock Jack!

first, that was very informative thank you allot!

My intention was exactly the toggling :D i should have not used .to() 

that solved my problem thank you all!

 

one extra question if u have capacity for it:
is there any ''Greensock/GSAP'' way to make sure the toggle .set display:none happen before a page loads? so that users don't see the element vanishing for a second before it is removed ? (it needs to be display:block initially then being removed with display:none)

Link to comment
Share on other sites

Hi @h-amad I would recommend reading the article about Flash of Unstyled Content (FOUC), this exactly explains what your are looking for with: 

29 minutes ago, h-amad said:

is there any ''Greensock/GSAP'' way to make sure the toggle .set display:none happen before a page loads? so that users don't see the element vanishing for a second before it is removed ?

Hope it helps and happy tweening! 

 

  • Like 2
Link to comment
Share on other sites

 

thank you @mvaneijgen this is indeed very useful,

sadly it helped only halfway through because my animation is an if & else function that depends on previous url:

so when i wrapped the whole animation in function init () {...}and added a window.addEventListener("load", function(event) {init();, it worked on the else part because element was originally set to visibility: hidden in css.

but in the if part, the targeted element is supposed to be visible from the beginning and fades out so i tried playing around with AutoAlpha

one option i tried in the if block is this

.set (".my-picture", {autoAlpha: 1}, 0)
.to(".my-picture", {opacity: 0, z:-100, duration: 0.4, ease: "power2.out"}, "<-1.2")

it worked in the case of making it visible so it fades out but it hides for a second before it's visible. 

any tip how to fix this?

Link to comment
Share on other sites

Hi,

 

I'm not sure I totally follow your issue, but maybe the issue is in the value you're passing to the position parameter here:

.to(".my-picture", {opacity: 0, z:-100, duration: 0.4, ease: "power2.out"}, "<-1.2")

Basically you're telling GSAP to add this instance minus 1.2 seconds before the previous instance's start time. If the previous instance is at zero seconds, then a negative time is send back from the end of the timeline. So for example if your timeline has a duration of 5 seconds and you pass a minus 1.2 seconds to the first instance or any other using the position parameter that tells GSAP to add that animation 1.2 seconds before the first instance, GSAP adds that instance 1.2 seconds before the end of the timeline, that's it at 3.8 seconds.

 

In this case if the previous instance is a set() instance it lasts 0 seconds, so there is no need to add that position parameter in the next animation.

 

If this is not the case of your setup, please create a minimal demo that illustrates this particular issue. Of course the URL stuff is not needed, just the code you're trying to run in that particular conditional block.

 

Hopefully this helps.

Happy Tweening!

Link to comment
Share on other sites

Hi @Rodrigo

there are many tween between them so it doesn't go behind 0, i also added a positive delay and problem still shows.

since it is an if function that depends on page load i don't really know how to visualise the problem on codepen :(
 

this is the whole code without the unrelated tweens

window.addEventListener("load", function(event)
{ init();
})

function init () {
    const previousUrl = document.referrer;
           if (previousUrl === "http://localhost:3004/index.html" 
    && window.location.pathname === "/Portfolio.html" && sessionStorage.getItem("visited") !== "true") {

    var pagetran = gsap.timeline();
    pagetran
        .set(".my-picture", {autoAlpha: 1}, 0)
        .to(".my-picture", {opacity: 0, z:-100, duration: 0.4, ease: "power2.out"})
  
// Set sessionStorage to true so that the if part doesn't run on refresh
      sessionStorage.setItem("visited", "true");

    } else {
          var pagetran1 = gsap.timeline();
    pagetran1
    .set(".my-picture", {autoAlpha: 0, display: "none"}, 0)
    }
  }

css is set to this.

.my-picture {visibility: hidden;}

This is basically a page transition animation where visitors see the .my-picture fade out if coming from the homepage. otherwise the .my-picture should be hidden on page refresh or coming from other pages.

 

does this help you understand it? 

Link to comment
Share on other sites

4 minutes ago, h-amad said:

since it is an if function that depends on page load i don't really know how to visualise the problem on codepen :(

It shouldn't really matter, just create a codepen example that has those DOM elements and just run that particular section of the code on page load. As I mentioned before the URL doesn't matter, just run that part in a load event:

window.addEventListener("load", function(event) {
  init();
});

function init () {
  var pagetran = gsap.timeline();
  pagetran
    .set(".my-picture", {autoAlpha: 1}, 0)
    .to(".my-picture", {opacity: 0, z:-100, duration: 0.4, ease: "power2.out"});
}

This is a simple example using just that part of the code you're posting and as you can see it works as expected:

See the Pen QWVOJdy by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

Link to comment
Share on other sites

Hi @Rodrigo 

i tried to basically do the exact same code on my website and it still doesnt work. 

here is my codepen, i cant really detect if it works here since there is no page-transition to see the flashing. 

See the Pen ZEMaVQo by hamadarabi (@hamadarabi) on CodePen

In my  Webflow link, you can see the issue right away when clicking on Portfolio button

also webflow read-only link

Link to comment
Share on other sites

Hi,

 

Sorry about that, but this is more related to the page transition than anything else. I don't know how you're creating the page transition but that is not a GSAP related issue. In this particular case the URL is changing and the entire page is completely loading from scratch so maybe that's why you're seeing that flash you're reporting, I'm assuming that this is what you're referring to:

https://www.loom.com/share/eb8a4c3843824bbe8e769047b5af69dd

 

Unfortunately beyond the codepen example there is not much more we can do about this. Hopefully another user with more webflow experience could chime in and give you some pointers. Also you should ask to webflow support about page transitions and using GSAP with them.

 

Sorry I can't be of more assistance.

Happy Tweening!

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