Amir-Ali-Basic

Yes i will do it this way, thank you so much

https://codepen.io/mikeK/pen/rNVEYVj i need something like this but with background change

https://codepen.io/Amir-Ali-Basic/pen/zYwBqjB here is pem

yes i will now

Hey all, i have trouble to make background image change, i need animation with duration of 3s and delay of 3s , so 3s of image and than 3 s where will first image will go from opacity 1 to opacity 0 and at same time image 2 will start from opacity 0 to opacity 1. I think i am trying to do it wrong way but problem with my code is , i have white screen before images change html <div class="homepage" id="homepage"> </div> css .homepage { background-image: url("/assets/img/Homepage-cover-v5.png"); background-position: center; background-size: cover; background-attachment: fixed; height: 100vh; width: 100%; } js function slider() { const SLIDER = gsap.timeline({ default: { ease: "ease.in", }, }); SLIDER.to(".homepage", { delay: 3, ease: "ease.in", keyframes: [ { duration: 1, opacity: 1, backgroundImage: "url(/assets/img/Homepage-cover-v5.png)", }, { duration: 1, opacity: 0.5, backgroundImage: "url(/assets/img/Homepage-cover-v5.png)", }, { duration: 1, opacity: 0.2, backgroundImage: "url(/assets/img/Homepage-cover-v5.png)", }, ], keyframes: [ { duration: 1, opacity: 0.5, backgroundImage: "url(/assets/img/pocetna3.png)", }, { duration: 1, opacity: 0.5, backgroundImage: "url(/assets/img/pocetna3.png)", }, { duration: 1, opacity: 1, backgroundImage: "url(/assets/img/pocetna3.png)", }, ], backgroundImage: "url(/assets/img/pocetna3.png)", }); } slider();

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

https://codepen.io/Amir-Ali-Basic/pen/WNomWem 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

https://www.sixt.com/#/fleet/selectcar/US?ctyp=multiseater This is link you will see effect when click on car

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"; } });

Heyy all i have problem, when click few times on navbar menu icon, it goes crazy everytinhg bug, can anyone know how can i make it work.

Hey all, i cannot share you my code right now, but the problem is i have some animation to move from bottom of page to top and it is not doing because it should push text wih margin bottom but it just make more space on bottom. This is just part of code

That is what i need thank you so much !!!

Hello everyone this is my first topic, I just started using GSAP and i have problem with one thig, i made animation for opening and closing menu but i have problem to animate content inside. Cany anyone please help me ? I am working it for one company and i am not sure can i share code in publice. Any suggestion please ?