Using GSAP to merge texts from left to right

I'm curious about the animation technique used by the developer to make his name come together from right to left. I'd love to try implementing it myself to improve my CSS skills.

It looks like GSAP ScrollTrigger was involved in this animation, if I'm not mistaken.

Check out the original animation here.

Answer №1

If you're looking for guidance, check out this partially completed jsFiddle: http://jsfiddle.net/86wkz3qu/19/

While the example doesn't utilize scrollTrigger, I strongly suggest incorporating it for a project like this.

IMPORTANT: Ensure the result display window is set to 870px to see the intended effect. To achieve similar scalability, consider using vw over %

I wish I could dedicate more time to this but best of luck! :)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What are some ways I can troubleshoot my contact form?

As someone new to web design, I recently completed my very first site using a combination of HTML, CSS, and a touch of JavaScript. I managed to create a small contact form within the site, but now I'm wondering if there's a way to make it functio ...

"Interact with jQuery by sliding side to side or in a circular motion

I am in need of assistance with sliding images using jQuery back and forth, or making them go round in a loop. Currently, the images slide up to the last element and then swiftly return to the first div, which is not visually appealing at all. I understa ...

Issue with Font-Awesome icons failing to display properly when using the BootstrapCDN

Trying to integrate Font-Awesome icon fonts using the BootstrapCDN link with what seems like the latest version: <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"> The link has been added to the <hea ...

Eliminate the Material Stepper heading

Is there a way to remove the header navigation from the material stepper? I've tried using the following CSS code without success: .mat-horizontal-stepper-header-container{display: none} You can view the stepper on Stackblitz by clicking this link: ...

How can I customize the appearance of a checkbox button in JavaFX?

I am currently working on styling a JavaFX scene with CSS in a stylesheet. The goal is to apply styles to all the "basic" elements of the scene when it loads. My issue lies in finding the correct code combination to change the background color of a button ...

The React Bootstrap modal refuses to fully close no matter how many times I click away or even on the close button

I am facing an issue with a modal in my React component. When I open the modal, it does not completely close when I try to click away or hit the close button. The backdrop disappears but the modal itself remains on the screen. (Screenshots attached for r ...

scrolling through horizontal bootstrap thumbnails

Hey there, I'm currently working on making the bootstrap thumbnails fit into a Div that has a horizontal scroll. However, I've run into an issue where they are collapsing beneath it instead of being offset properly as shown in the image. Does any ...

In regards to navigational bars that are oriented horizontally

Trying to create a simple navigation bar with horizontal links but facing issues. Can't seem to make it work despite following examples online: <!-- Navigator --> <div id="nav"> <ul> <li><a href="#"& ...

using a tag in flex can disrupt the arrangement of the box's design

What could be the reason for this issue? Is it possible to make the hyperlink appear inline with the rest of the text? .test { padding: 25px; display: flex; height: 100%; text-align: center; font-size: 25px; font-weight: 600; ...

Enhancing CSS to create a more visually appealing loading spinner

I am completely new to CSS and I've been attempting to customize the CSS in the angular-loading-bar module to create a more visually appealing loading spinner. Currently, I have a square spinner that rotates in the center of the page, with a black bor ...

Experimenting with Jquery hyperlinks beyond the realm of Google Chrome

Is there a way to verify a jQuery link without relying on the inspect element feature in Google Chrome? I initially thought that was the issue because the links failed to load, but even after correcting it, the show function still does not perform the anim ...

Resizing the window causes divs to be positioned relative to the image (almost functional)

In my coding project, I've encountered a situation where I have 3 "pins" positioned within a div called #outerdiv. This div has a background-image and the pins are supposed to remain in the same spot on the background image no matter how the window is ...

Having trouble getting jQuery .append() to behave the way you want?

I have created a code snippet to display a table like this: $("#results").append("<table><tr><th>Name</th><th>Phone Number</th></tr>"); $("#results").append("<tr><td>John</td><td>123123123 ...

Modify the default navbar from Bootstrap to display as a fixed navbar

Is there a way to change my default navbar into a fixed navbar when I scroll? I have tried adding data-spy="affix" data-offset-top="200", which works but doesn't look quite right. Should I create a new CSS class or is there an easier solution availab ...

Can anyone provide a solution for the issue with bootstrap utilities?

Currently, I am using Vue3 with Vite and attempting to integrate Bootstrap into my project. While I have managed to implement most of it successfully, I encountered a significant error when trying to override Bootstrap-related variables. Can anyone offer a ...

The transparent DIV/waiting message may not be displayed in IE10

Here is a DIV container that serves as a transparent background with a loading message. This is the HTML code for the DIV container: <div id="generatingexcel" style="display:none; position: fixed; width: 100%;height: 100%; z-index: 999; top: 0; left: ...

Tips for integrating external JavaScript libraries and stylesheets into a widget

I am currently working on developing a custom Javascript widget that requires users to insert specific lines of code into their web pages. This code will then dynamically add an externally hosted javascript file, allowing me to inject HTML content onto the ...

Trouble with displaying vertical scroll bar in React app when height is set to 100%

I am developing a React application where I need the content to always occupy at least 100% of the height to style the background accordingly. I have attempted to achieve this by setting the CSS height to 100% at the top level, which works fine. However, t ...

Position two in-line divs at the bottom, one on each side

I am in search of a way to dynamically position two elements at the bottom of a container, making sure they are at opposite corners. Much like how the Stackoverflow Logo and the Ask Question are aligned at the bottom but on different ends of their containe ...

Obtaining the text of a span tag within a div using Selenium in C#

<div id="uniqueSummaryID" class="custom-text" data-reactid=".0.0.0.3.0.0.1.0.0.0.0.$unique_key_25.1.1.0"> <span data-reactid=".0.0.0.3.0.0.1.0.0.0.0.$unique_key_25.1.1.0.0">5</span> <span data-reactid=".0.0.0.3.0.0.1.0.0.0.0.$unique_ke ...