Need help to add animation when change dispay none to block

[Amir-Ali-Basic]

Hey everyone,

 

I need help to add transition on when i change display none to display block i have simple code right now , and i am new to gsap.

I have website with simular effect so can i share link of website here ?

 

const showCar = document.querySelector("#car_1");
const car = document.querySelector(".car");

showCar.addEventListener("click", () => {
if (car.style.display === "block") {
car.style.display = "none";
} else {
car.style.display = "block";
}
});

 

[Patrick Rijkee]

As far as i know display can not be animated, what you could do is animate opacity to fade in the element.

if you could make a codepen demo that would make it a lot easier for us to help you. 

And i believe it is not a problem to share a link that shows the effect you want. As long as it is relevant to your question.

[Amir-Ali-Basic]

https://www.sixt.com/#/fleet/selectcar/US?ctyp=multiseater

 

This is link you will see effect when click on car

[ZachSaucier]

Hey Amir. As Patrick shared, the display property itself is not animatable, regardless of whether or not you're using GSAP. However, GSAP makes it easy to animate in elements that have a display of hidden. You simply need to pair a property to be animated (usually opacity or autoAlpha) with the display. For example:

// If the elem has display: none and opacity: 0
gsap.to(".hiddenElem", { display: "block", opacity: 1 });

// If the elem has display: none and opacity: 1
gsap.fromTo(".hiddenElem", { opacity: 0 }, { display: "block", opacity: 1 });

Also as Patrick said, if you'd like additional coding help please create a minimal demo using the guide that he linked to.

[Amir-Ali-Basic]

See the Pen WNomWem by Amir-Ali-Basic (@Amir-Ali-Basic) on CodePen

 

here is the pen and only first one is clickable, so what i need to do is to add transition on opening and closing item

[iDad5]

I'd also suggest that you use other attributes or a class to Hold the information which car is shown or hidden. Also If you use the style.display property checking for 'block' always comes with the risk that the displaced is inline-block etc. 

You really should think of a more structural approach.   

[ZachSaucier]

Hey Amir. This question is for specific questions, not a place to get people to do the whole thing for you. So if you'd like further debugging help, please include your attempt(s) and ask a specific question about the issue that you're running into.

[Amir-Ali-Basic]

I am sorry, but i only ask is it posible to animate display or i must finde some other way to do it

[ZachSaucier]

We answered that in this thread above so I won't re-explain it here.