Technology Demo - WET Assignment 5

Who?

This was created by a Web Developer by the name of Manoela llic who is a Editor-in-Cheif at Codrops. She gets full credit for providing this interesting demo that could lead other aspiring developers to create some fascinating UX interactions for webpages.

Where?

I had found this Demo on a website provided by my instructor Robert called Codrops, which is a really cool website for designers and developers to find inspiration on creating new ways to add more dynamic designs or interactions for users. Some being for intermediate skill levels to more advanced web technologies.

Link to Demo's article

When?

This blog was created on July 13, 2023 which is displayed in Playground of Codrops website. Playground being a feature of web experiments, concepts, layouts that expand more on more than just traditional web designs and displays some of the latest animation techniques.

What?

What this concept does is allow a block of texts to transition into a different set of texts using different word transitions and animations.

Why?

This can allow designers to have a fun and interesting way of providing some fun user experiences. This could be used in many ways such as providing a paragraph from a book perhaps, then clicking the transition button to load in the following paragraph from that book. Maybe even some poetry, depending on the purpose of the website. Their are so many ways that a designer could use this technique, it all depends on the creativity of the one implementing it into their website.

The example will be provided below.

Demo Example

“In the long history of the world, only a few generations have been granted the role of defending freedom in its hour of maximum danger. I do not shrink from this responsibility–I welcome it. I do not believe that any of us would exchange places with any other people or any other generation. The energy, the faith, the devotion which we bring to this endeavor will light our country and all who serve it–and the glow from that fire can truly light the world. And so, my fellow Americans: ask not what your country can do for you–ask what you can do for your country...
My fellow citizens of the world: ask not what America will do for you, but what together we can do for the freedom of man. Finally, whether you are citizens of America or citizens of the world, ask of us here the same high standards of strength and sacrifice which we ask of you. With a good conscience our only sure reward, with history the final judge of our deeds, let us go forth to lead the land we love, asking His blessing and His help, but knowing that here on earth God’s work must truly be our own.” - John F. Kennedy

Instructions

Html

Here in the html you will need a trigger button to active the animation of block text to transform into a different set of text with an interesting transition. You will then need two separate divs with a class of "content_text" along with the text "data-splitting" after the class has been defined. One div will be visble with the text and the other will be hidden until the button is triggered. What is interesting and new to me is that the data-splitting is not defined by a class or an ID which is definitely new to me as I am still trying to improve my javascript. Although, it definitely has a purpose for a javascript file called "splitting.min.js" which I will discuss in the next portion.

image of html code snippet

Javascript

The Javascript within this has 4 different files that are what will make this function process. Back to what I had mention above, with the "splitting.min.js" file, Splitting is a javascript micro library with a collection of small built-in plugins that are created to split an element in various ways that can include words, characters, child nodes, and much more. This library does not handle animation but instead gives the developer elements and tools necessary to create these transitions with Javascript animation libraries or only CSS.

snippet of js files

Another file needed will be "utils.js" which is the file that will wrap in the elements by referencing the parent node, inserting a wrapper then appending the word inside the wrapper. Essentially this will preload the fonts for the block text transitions.

snippet of wrap elements from utils.js file snippet of preloading fonts from utils.js file

Our next will be a file by the name of "gsap.min.js" which stands for Greensock Animation Platform. GSAP is another javascript library that handles high-performance animations that are used widely by developers and it simplifies the process of creating much more dynamic animations that CSS cannot achieve. It is a fun a way of being able to animate anything that javascript can get a hold of. The file contains 1 extremely long line of code.

Then lastly, we have our final file named "demo.js" which will contain the other files needed to make these animations happen. In the demo code we will import the preloaded fonts from the js file "utils.js". Then use the "splitting.js" file to split the text into characters by defining a variable equaling the splitting function. We then will get all the elements that contain the class of ".content_text" into an array using querySelectorAll. We will then set the position of the currently displayed text to 0 since it is an array along with a boolean to prevent it from switcing during an ongoing animation. We will then apply the class to the current text that is displayed.

snippet of first portion of demo.js

Then establishing a function called switchTexts to do exactly what the name says. Then using an if statement that if it is ongoing, it will do nothing but if the statement is true then it will start animating. Calculating is current position, then getting the words of both current and upcoming texts.

snippet of second portion of demo.js

Then the gsap.min.js file comes into play, as we use it to define the animation using this library.

snippet of third portion of demo.js

Once the animation is established, we will use the queryselector for class name ".trigger" and add an event listener for when the button is clicked, it will run the function "switchTexts". Then proeloading the fonts and once they are added, we will remove the loading class from the body to end the loading state.

snippet of fourth portion of demo.js

CSS

Included in the splitting js library, are two CSS files called "splitting.css" and "splitting-cells.css". The first file "splitting.css" will include many extra CSS variables and psuedo elements that will help power these advanced animations that regular CSS cant and especially for text related transitions. Then our "splitting-cells.css" file that is included from the library will contain the setup styles that are cell/grid basedd that the user will need to implement themselves. Once again, this demo goes full credit to Manoela llic, This demo is working due to her providing her open source.

Link to Demo's article

Link to Demo on github.

This page's HTML Code



            
The Prism JavaScript Code

            


            
The Demo JavaScript Code

            


            
This page's Prisim CSS Code

            


            
This page's Splitting Cells CSS Code

            


            
This page's Splitting CSS Code