#gsap

[jcmarchi]

Combining forces, GSAP & Webflow!

New Post has been published on https://thedigitalinsider.com/combining-forces-gsap-webflow/

Combining forces, GSAP & Webflow!

Change can certainly be scary whenever a beloved, independent software library becomes a part of a larger organization. I’m feeling a bit more excitement than concern this time around, though.

If you haven’t heard, GSAP (GreenSock Animation Platform) is teaming up with the visual website builder, Webflow. This mutually beneficial advancement not only brings GSAP’s powerful animation capabilities to Webflow’s graphical user interface but also provides the GSAP team the resources necessary to take development to the next level.

GSAP has been independent software for nearly 15 years (since the Flash and ActionScript days!) primarily supported by Club GSAP memberships, their paid tiers which offer even more tools and plugins to enhance GSAP further. GSAP is currently used on more than 12 million websites.

I chatted with Cassie Evans — GSAP’s Lead Bestower of Animation Superpowers and CSS-Tricks contributor — who confidently expressed that GSAP will remain available for the wider web.

It’s a big change, but we think it’s going to be a good one – more resources for the core library, more people maintaining the GSAP codebase, money for events and merch and community support, a VISUAL GUI in the pipeline.

The Webflow community has cause for celebration as well, as direct integration with GSAP has been a wishlist item for a while.

The webflow community is so lovely and creative and supportive and friendly too. It’s a good fit.

I’m so happy for Jack, Cassie, and Rodrigo, as well as super excited to see what happens next. If you don’t want to take my word for it, check out what Brody has to say about it.

Direct Link →

[codingflicks]

Travel Card Slider

[lenacodey]

Discover how to enhance user experience with web animations. Learn about different types, best practices, and tools like CSS, GSAP, and SVG animations to create engaging, interactive websites.

[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

[engelthm]

hi! is there a way to make aphaea theme have infinite scroll? it's so beautiful and fits well with my project but the next pagt thing is bothering me :(

hiya! thanks so much.

to answer your question generally, yes there probably is a way to add infinite scroll. unfortunately, i don't do theme customization (meaning i don’t add custom elements to my themes.)

infinite scroll works usually only if you create exceptions in the code for every individual javascript file, which for my themes that are quite js heavy, like aphaea, would be quite time consuming. As well, it could potentially mean that the end result would be laggy or glitchy.

sorry for the disappointment, however i hope you find something that better suits your needs!

[celebswearingghost]

Michael Ebenezer Kwadjo Omari Owuo Jr

[morrigansravens]

Also, regarding coding, I have to figure out how to create the image animation that I want for my website using javascript libraries but I can't seem to find a good tutorial for what I want.....

[massivementalitynut]

@heavenlyevil @satorusinfinity @satorhime @threadbaresweater @peachsayshi @solomons-poison

Satoru

[codingflicks]

Parallax Photo Carousel using HTML CSS JS

[pipplerino]

gsAP

[captain-price-unofficially]

Brief clips from RAF GSAP showing aircraft strafing German shipping, 1941

[the-doll-in-red]

GSAP RED AND GOAT MAN ARE DOING THE HORIZONTAL MONSTER MASH?!

SUCH SIN! I MUST INFORM TORIEL POST HASTE THAT A MARRIED COUPLE DARE TO COPULATE

[engelthm]

aphaea theme by engelthm

live preview ― code

a experimental, minimalistic header theme, with animations enabled by GSAP.

on-load landing page and header/footer scroll animations.

any font and font size, with optional header and footer descriptions.

optional five links and custom cursor.

fully responsive for mobile devices.

credits can be found here.

note on experimental animations:

this is a part of a new series of codes i plan on releasing that all use some form of web animation. because of this, certain animations may be slow or laggy. i've tried my best to mitigate this, however do please let me know if something doesn't seem to work for you as intended!

do note there also may be a chance that something just won't work, based on browser capability or internet connection, but i will try my best to find solutions to any problems :)

[reliquarian]

If you're comfortable with doing very light JS editing - like, literally just creating and editing an object, 100% recommend GSAP. It's such a fantastic library, super excited at the potential available to people now that it's FREEEEE

[pixelxgore]

i don’t know how to animate but i had a vision and capcut

please tell me you get the reference (it’s only like two weeks old)

i saw the video and was like *gsap*

if you don't understand (idk how you wouldn't but whatever) its a reference to one of Matpat’s fnaf dark remains bloopers

If you haven't seen fnaf dark remains you should its great

Sorry its kinda bad I just need to get my idea out there (like I said I have no idea what I'm doing I just have a dream)