#SliderTutorial

[cssmonster]

Learn how to create a slider using GSAP

Introduction

In this tutorial, we will walk you through the process of creating a stunning slider called "Voyage Slider" using the GSAP (GreenSock Animation Platform) library. This slider allows you to showcase images and information about various travel destinations in a visually appealing way. Before we dive into the code, you can preview the final result by checking out the demo here. See the Pen Voyage Slider | GSAP by Sikriti Dakua (@dev_loop) on CodePen.

Getting Started

Before we start coding, make sure you have the following prerequisites: - A text editor (e.g., Visual Studio Code, Sublime Text) - Basic knowledge of HTML, CSS, and JavaScript - An internet connection to load external libraries

HTML Structure

Let's begin by setting up the HTML structure for our Voyage Slider: HTML ... ... ... ... ... ... Ensure you have the necessary CSS classes and IDs for styling and JavaScript interactions.

CSS Styles

Next, include the CSS styles needed for the slider. You can link to an external CSS file or include the styles within a " style="color:#F8F8F2;display:none" aria-label="Copy" class="code-block-pro-copy-button"> /* Add your CSS styles here */

JavaScript Code

Now, let's add the JavaScript code that makes the Voyage Slider come to life: JavaScript console.clear(); const { gsap, imagesLoaded } = window; const buttons = { prev: document.querySelector(".btn--left"), next: document.querySelector(".btn--right"), }; const cardsContainerEl = document.querySelector(".cards__wrapper"); const appBgContainerEl = document.querySelector(".app__bg"); const cardInfosContainerEl = document.querySelector(".info__wrapper"); buttons.next.addEventListener("click", () => swapCards("right")); buttons.prev.addEventListener("click", () => swapCards("left")); function swapCards(direction) { const currentCardEl = cardsContainerEl.querySelector(".current--card"); const previousCardEl = cardsContainerEl.querySelector(".previous--card"); const nextCardEl = cardsContainerEl.querySelector(".next--card"); const currentBgImageEl = appBgContainerEl.querySelector(".current--image"); const previousBgImageEl = appBgContainerEl.querySelector(".previous--image"); const nextBgImageEl = appBgContainerEl.querySelector(".next--image"); changeInfo(direction); swapCardsClass(); removeCardEvents(currentCardEl); function swapCardsClass() { currentCardEl.classList.remove("current--card"); previousCardEl.classList.remove("previous--card"); nextCardEl.classList.remove("next--card"); currentBgImageEl.classList.remove("current--image"); previousBgImageEl.classList.remove("previous--image"); nextBgImageEl.classList.remove("next--image"); currentCardEl.style.zIndex = "50"; currentBgImageEl.style.zIndex = "-2"; if (direction === "right") { previousCardEl.style.zIndex = "20"; nextCardEl.style.zIndex = "30"; nextBgImageEl.style.zIndex = "-1"; currentCardEl.classList.add("previous--card"); previousCardEl.classList.add("next--card"); nextCardEl.classList.add("current--card"); currentBgImageEl.classList.add("previous--image"); previousBgImageEl.classList.add("next--image"); nextBgImageEl.classList.add("current--image"); } else if (direction === "left") { previousCardEl.style.zIndex = "30"; nextCardEl.style.zIndex = "20"; previousBgImageEl.style.zIndex = "-1"; currentCardEl.classList.add("next--card"); previousCardEl.classList.add("current--card"); nextCardEl.classList.add("previous--card"); currentBgImageEl.classList.add("next--image"); previousBgImageEl.classList.add("current--image"); nextBgImageEl.classList.add("previous--image"); } } } function changeInfo(direction) { let currentInfoEl = cardInfosContainerEl.querySelector(".current--info"); let previousInfoEl = cardInfosContainerEl.querySelector(".previous--info"); let nextInfoEl = cardInfosContainerEl.querySelector(".next--info"); gsap.timeline() .to(, { duration: 0.2, opacity: 0.5, pointerEvents: "none", }) .to( currentInfoEl.querySelectorAll(".text"), { duration: 0.4, stagger: 0.1, translateY: "-120px", opacity: 0, }, "-=" ) .call(() => { swapInfosClass(direction); }) .call(() => initCardEvents()) .fromTo( direction === "right" ? nextInfoEl.querySelectorAll(".text") : previousInfoEl.querySelectorAll(".text"), { opacity: 0, translateY: "40px", }, { duration: 0.4, stagger: 0.1, translateY: "0px", opacity: 1, } ) .to(, { duration: 0.2, opacity: 1, pointerEvents: "all", }); function swapInfosClass() { currentInfoEl.classList.remove("current--info"); previousInfoEl.classList.remove("previous--info"); nextInfoEl.classList.remove("next--info"); if (direction === "right") { currentInfoEl.classList.add("previous--info"); nextInfoEl.classList.add("current--info"); previousInfoEl.classList.add("next--info"); } else if (direction === "left") { currentInfoEl.classList.add("next--info"); nextInfoEl.classList.add("previous--info"); previousInfoEl.classList.add("current--info"); } } } function updateCard(e) { const card = e.currentTarget; const box = card.getBoundingClientRect(); const centerPosition = { x: box.left + box.width / 2, y: box.top + box.height / 2, }; let angle = Math.atan2(e.pageX - centerPosition.x, 0) * (35 / Math.PI); gsap.set(card, { "--current-card-rotation-offset": `${angle}deg`, }); const currentInfoEl = cardInfosContainerEl.querySelector(".current--info"); gsap.set(currentInfoEl, { rotateY: `${angle}deg`, }); } function resetCardTransforms(e) { const card = e.currentTarget; const currentInfoEl = cardInfosContainerEl.querySelector(".current--info"); gsap.set(card, { "--current-card-rotation-offset": 0, }); gsap.set(currentInfoEl, { rotateY: 0, }); } function initCardEvents() { const currentCardEl = cardsContainerEl.querySelector(".current--card"); currentCardEl.addEventListener("pointermove", updateCard); currentCardEl.addEventListener("pointerout", (e) => { resetCardTransforms(e); }); } initCardEvents(); function removeCardEvents(card) { card.removeEventListener("pointermove", updateCard); } function init() { let tl = gsap.timeline(); tl.to(cardsContainerEl.children, { delay: 0.15, duration: 0.5, stagger: { ease: "power4.inOut", from: "right", amount: 0.1, }, "--card-translateY-offset": "0%", }) .to(cardInfosContainerEl.querySelector(".current--info").querySelectorAll(".text"), { delay: 0.5, duration: 0.4, stagger: 0.1, opacity: 1, translateY: 0, }) .to( , { duration: 0.4, opacity: 1, pointerEvents: "all", }, "-=0.4" ); } const waitForImages = () => { const images = ; const totalImages = images.length; let loadedImages = 0; const loaderEl = document.querySelector(".loader span"); gsap.set(cardsContainerEl.children, { "--card-translateY-offset": "100vh", }); gsap.set(cardInfosContainerEl.querySelector(".current--info").querySelectorAll(".text"), { translateY: "40px", opacity: 0, }); gsap.set(, { pointerEvents: "none", opacity: "0", }); images.forEach((image) => { imagesLoaded(image, (instance) => { if (instance.isComplete) { loadedImages++; let loadProgress = loadedImages / totalImages; gsap.to(loaderEl, { duration: 1, scaleX: loadProgress, backgroundColor: `hsl(${loadProgress * 120}, 100%, 50%`, }); if (totalImages == loadedImages) { gsap.timeline() .to(".loading__wrapper", { duration: 0.8, opacity: 0, pointerEvents: "none", }) .call(() => init()); } } }); }); }; waitForImages(); Make sure to replace the comment placeholders with your actual code.

CSS Styles

Let's continue by adding the CSS styles for your Voyage Slider. You can include these styles within a " style="color:#F8F8F2;display:none" aria-label="Copy" class="code-block-pro-copy-button"> /* Import Google Fonts */ @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700;800&display=swap"); /* Define CSS variables for customization */ :root { --card-width: 200px; --card-height: 300px; --card-transition-duration: 0.8s; --card-transition-easing: ease; } /* Reset default styles */ * { box-sizing: border-box; margin: 0; padding: 0; } /* Add your CSS styles here */ /* ... */

Conclusion

Congratulations! You have successfully learned how to create the Voyage Slider using HTML, CSS, and GSAP. This slider can enhance the visual appeal of your website and engage your audience with stunning travel destination images. Feel free to customize the slider further and integrate it into your web projects to showcase your own content.

Additional Resources

If you want to explore more about GSAP animations and web development, here are some helpful resources: - GSAP Documentation - Official GSAP documentation for in-depth learning. - MDN Web Docs - A comprehensive resource for web development. - CodePen - Explore and experiment with code snippets and projects. Thank you for following this Voyage Slider tutorial. If you have any questions or feedback, please don't hesitate to reach out. Happy coding! Read the full article

[mokubetech]

In this tutorial, we will walk you through the process of changing sizes and dimensions in Revolution Slider 6. Revolution Slider 6 is a powerful tool for designing stunning sliders for your website. However, it can be overwhelming to navigate the many options and features. But don't worry, in this video, we will guide you step-by-step on how to change sizes and dimensions in Revolution Slider 6.

First, we will show you how to change the size of your slider to fit your website's layout, and then we will dive deeper into the dimensions of your slider, including width, height, and aspect ratio. With these adjustments, you will be able to create custom sliders that look great on any device.

In addition, we will cover how to set your slider to full width, and how to adjust your slide's layers to fit your new dimensions. By the end of this tutorial, you will feel confident in your ability to create amazing sliders in Revolution Slider 6.

So, let's get started and learn how to change sizes and dimensions in Revolution Slider 6!