How can i get this animation from codepen to work?

HTML & CSS
1

So i copied and pasted everything from the codepen. The html, scss and script. The js is in the script tag and scss is in an external file. Now I don’tt know scss yet so im assuming it has to be that. What do I need to edit, I mean i copied the html too, so why isn’t it working? How would I get this to work? Even on codesnippet the thing doesnt work. If this is all to complex to answer, Is there another easier way to replicate this? I like the glow going through each word.
Animation here

2

Can you show us your attempt? Then we can see what went wrong :slight_smile: .

1 Like
3

I just copied and pasted their codepen! :slight_smile: Even in codesnippet its not working. Code snippet is on here. https://stackoverflow.com/questions/65187614/is-there-a-simplified-way-to-create-transmission-glowing-text-animation

I think i see why…

{
“message”: “Uncaught ReferenceError: jQuery is not defined”,
“filename”: “https://stacksnippets.net/js”, <—what.
“lineno”: 191,<—i dont see the line number
“colno”: 4
}

4

Did you link to the jquery library and did you copy the compiled css?

If you copied the SCSS do you have SCSS set up in your environment in order for it to run. It doesn’t just work by itself and takes some effort to implement.

You could have copied the compiled scss from the codepen using the options in the top of the panel and then you get just raw css.

Alternatively just fork the codepen and then its all yours to play around with.
Here’s the compiled css and the html after the JS has added spans around everything.

There is no JS in that example but as you see its a lot of work to do manually but it may help you understand what’s going on. :slight_smile:

2 Likes
5

Well i switched to vs code because someone said it had sass or scss in it. Ah I actually realized i didn’t link to jquery library. thank you master paul! just looking at the css has made me sweat. can i pay you 150 a month to be my mentor lol!!

1 Like
6

Here’s a much much simpler version of mine that could be tweaked to good effect.

I had an older version from a while ago in answer to a similar question on the forum.

It all depends on how much time you want to spend on things :slight_smile:

2 Likes
7

Amazing!! I really appreciate you sharing knowledge.

1 Like
8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.