We Keep Coding

How to get JS file to animate code using GSAP?

I'm new to coding js, and am trying to use GSAP to animate some code. I cannot get anything to move or do any function. I don't have any errors when I compile my file. Also, I cannot get anything to animate on my CodePen, which I have been trying to use to see if I can try to do anything that might work. My html and css are working fine. I don't know what might be the problem?
CodePen:
https://codepen.io/ashleynw1800/pen/VwaRGBX
HTML:
<!-- Font Awesome-->
<script src="https://kit.fontawesome.com/3c79b583ac.js" crossorigin="anonymous"></script>
<!-- Google Fonts-->
<link href="https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap" rel="stylesheet">
<section class="section-1">
<div id="hello-container">
<h1 class="hello"> hello!</h1>
</div>
<div id="happy-container">
<i class="fa fa-smile-o" aria-hidden="true"></i>
</div>
</section>
CSS:
/* =============
Demo
============= */
.section-1{
display: grid;
grid-template-areas: ". hello happy .";
grid-template-columns: "auto 2fr 1fr auto";
background-color: #E6EBFF;
}
#hello-container{
grid-area: hello;
align-self: center;
}
.hello{
font-size: 150px;
font-family: 'Abril Fatface', cursive;
color: #FF4F2D;
}
#happy-container{
grid-area: happy;
align-self: center;
color: #FF89FF;
font-size: 150px;
}
JS(I have taken all out except for one basic line to try to get anything to work):
import {gsap} from "gsap";
gsap.to(".hello", {duration:2, alpha:0})

"Your mistake" ==> Wrong implementation of the module idea/concept:
The module to import from. This is often a relative or absolute path
name to the .js file containing the module.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#:~:text=To%20dynamically%20import%20a%20module,js')%20.
Installation by CDN (Codepen). Remove import {gsap} from "gsap"; and the code will work fine. Otherwise, you get this error:
Uncaught TypeError: Failed to resolve module specifier "gsap"
In general, it is very useful to inspect your code and check for console errors.
https://developers.google.com/web/tools/chrome-devtools/console
Related article:
Failed to resolve module specifier
https://medium.com/#samichkhachkhi/failed-to-resolve-module-specifier-23fae20222df
Loading GSAP using modules tutorial:
https://greensock.com/docs/v3/Installation#npm

React reusing styles (css/scss)

I have a .scss file in src/assets/css/button.module.css
simplified content below
.btn:visited{
text-transform: uppercase;
text-decoration: none;
padding: 15px 40px;
}
I want to use this style in multiple components. How can i import the css to required component
I tried importing this in another scss as below
#import url('../../assets/css/button.module.scss');
But the the styles are not getting loaded. Any advice please

Try using
#import '../../assets/css/button.module.scss'
If does not work try using partials

Error when importing web components in the "wrong" order

I have built a small library of several HTML web components for internal company use. Some components are mutually dependent on each other, so I also import them mutually. Until recently, I had no serious issues with this approach, but I am now encountering an error message when loading a HTML page that uses such mutually dependent components.
I have isolated the issue in a small example. Please review the following three files.
test-container.js
import { TestItem } from "./test-item";
export class TestContainer extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: "open" }).innerHTML = `
<style>
* {
position: relative;
box-sizing: border-box;
}
:host {
contain: content;
display: block;
}
</style>
<div>
<slot></slot>
</div>
`;
}
connectedCallback() {
if (!this.isConnected) {
return;
}
for (const node of this.childNodes) {
if (node instanceof TestItem) {
//...
}
}
}
}
customElements.define("test-container", TestContainer);
test-item.js
import { TestContainer } from "./test-container";
export class TestItem extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: "open" }).innerHTML = `
<style>
* {
position: relative;
box-sizing: border-box;
}
:host {
contain: content;
display: block;
}
</style>
<div>
<slot></slot>
</div>
`;
}
}
customElements.define("test-item", TestItem);
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Test</title>
<script type="module" src="/test-container"></script>
<script type="module" src="/test-item"></script>
<style>
test-container {
width: 600px;
height: 400px;
background: lightblue;
border: 1px solid;
}
test-item {
width: 200px;
height: 200px;
background: lightgreen;
border: 1px solid;
}
</style>
</head>
<body>
<test-container>
<test-item></test-item>
</test-container>
</body>
</html>
This code seems to work fine.
However, if I switch the two <script> tags in the index.html file, the developer tools console shows the following error:
Uncaught ReferenceError: Cannot access 'TestItem' before initialization
at HTMLElement.connectedCallback (test-container:30)
at test-container:37
Since I import several modules in many of my components, I want to sort them alphabetically (for clarity). In my test example it's fine, but in my actual code it isn't...
So basically I want my modules to be completely independent of the order in which they will be imported by other modules. Is there any way to achieve that?
All suggestions are very welcome. However, I am not allowed to install and use any external/3rd party packages. Even the use of jQuery is not allowed. So a solution should consist of only plain vanilla JS, plain CSS, and plain HTML5, and it should at least work correctly in the latest Google Chrome and Mozilla Firefox web browsers.

When you can't control the order in which Elements are loaded,
you have to handle the dependency in your Element
Use: https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/whenDefined
whenDefined returns a Promise!
So your <test-container> code needs something like:
customElements.whenDefined('test-item')
.then( () => {
//execute when already exist or became available
});
https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/whenDefined
has a more detailed example waiting for all undefined elements in a page
Dependencies
An Event driven approach might be better to get rid of dependencies.
Make <test-item> dispatch Event X in the connectedCallback
<test-container> listens for Event X and does something with the item
You can then add <another-item> to the mix without having to change <test-container>
Maybe the default slotchange Event can be of help:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLSlotElement/slotchange_event
.
Success met welke aanpak je ook kiest

it may help
<!-- This script will execute after… -->
<script type="module" src="1.mjs"></script>
<!-- …this script… -->
<script src="2.js"></script>
<!-- …but before this script. -->
<script defer src="3.js"></script>
The order should be 2.js, 1.mjs, 3.js.
The way scripts block the HTML parser during fetching is baaaad.
With regular scripts you can use defer to prevent blocking, which also delays script execution until the document has finished parsing, and maintains execution order with other deferred scripts.
Module scripts behave like defer by default – there's no way to make a module script block the HTML parser while it fetches.
Module scripts use the same execution queue as regular scripts using defer.
Source

CssSandpaper library error - rules object empty

I've got a problem with CssSandpaper script. Once I run it on one of my site's pages, I get following error:
"rules is null" in FF,
"Error: 'rules.length' is null or not an object" in IE,
"Uncaught TypeError: Cannot read property 'length' of null" in Chrome,
so basically object 'rules' is undefined. Here is CSS for my div (id="textTransform"):
#textTransform {
border: 1px solid green;
-sand-transform: rotate(90deg);
width: 23px;
height: 74px;
}
Has anyone of you ever had such issue? Any help would be much appreciated.
Thanks

Two things for me caused an "uncaught exception error" in combination with the csssandpaper.js and the other required scripts for the css sandpaper library.
html5doctor.com Reset Stylesheet
Typekit js
Removing both of those removed the error

Ok. I've got it. This library gets all the references that are listed in "link" tags in you "meta" section in HTML. I've had this line that defines a link to favicon:
<link rel="shortcut icon" href="/favicon.ico" />
The favicon wasn't present at the server and its response was 404. That was the reason. Once I removed it it start working.

Special characters problems in wordpress powered site

Hey guys I'm having an issue because of some script a client wants to include in her wordpress site. The problem is I have to use a special charset for it to work properly, otherwise I have problems with the "áéíóú" characters. This is the code:
<script>
var bae_bgcolor= "#FFFFFF";
var bae_width="370";
var bae_cantidad="3";
var bae_showhead15=1;
var bae_bgcolorhead15="#B8CDD6";
</script>
<style type=text/css>
<!--
.ib_fecha15 { font-family: Arial; font-size: 10px; color: #606060}
.ib_titulo15 { font-family: Arial; font-size: 12px; color: #606060; text-decoration:none;}
.ib_head15 { font-family: Arial; font-size: 13px; color: #5A555A}
-->
</style>
<script language="javascript" type="application/javascript" charset="ISO-8859-1" src="http://www.infobae.com/adjuntos/noticias/0000015.js"></script>
Now that got it working but I'm having problems with the rest of the site and where there should be a "ú" I get a "ú" and where there should be a "ó" I get a "ó". I changed the configuration so that I have in the header. I still have problems and now I can't even post something new which contains those characters.
If anyone has had these problems before, any help will be...well, helpful. Thanks

Why not go utf-8 instead of latin? Anyway, make sure your actual source files are stored using the same encoding as you tell the browser to use (in the header etc).

Whenever I include a piece of JavaScript with accented characters, I alwyas send it through HTML Encode and Decode on Strictly Software, which would convert á into á.
It can be done on the fly but I've had difficulties saving the accented characters before. In those cases, I take the original script, run the text through the program on that link and re-save the file.