GSAP Match Media
Hi All,
I have a gsap tl animation here, it was working perfectly fine, but I wanted to add a match media query so that the animation had a slightly different styling on the mobile breakpoint.
I added the match media in and cant seem to get it working, as the whole animation is now broken.
Can someone have a brief look at the screenshot attached and let me know why my match media might not be working.
The first and second screenshot is of exactly what I added in to the original working code.
Last thing, can someone let me know if this is html or javascript as im using VS code and would like to set the language. As a complete noob learning on the go I thought GSAP was Javasctipt but someone has told me the code in the screen shots is HTML.
Thanks! π
Dylan
15 Replies
@dmoco can you send this as text instead of as an image?
You have some syntax errors
Sure, it might be easier if I send a pen
as to your question: "Is this HTML or javascript"... it's kind of both lol.
The javascript is everything in between the
<script> tags
The <script> tags are HTML. They signify to the document parser (the thing the browser does) that the next bit of text is script i.e. Javascript.
In the codepen example, anything with <script> should be in the HTML section. I'll see If I can create a fork for you.
Also in codepen, you include scripts from the settings tab. I understand it can all be quite confusing!
so it would look more llike this in codepen
In Webflow, the page settings blocks are HTML, which is why we wrap things in <script> tags
I don't have a way to test your code without the HTML elements (the things with ids and classname like
#logo-embed and .hero-bg-wrapper)
but here's what chatGPT spit out once I cleaned up the code.
Does it help?
https://chat.openai.com/share/39541d6b-f5a7-4aad-918d-c77c54daa129ChatGPT
A conversational AI system that listens, learns, and challenges
ahhh i see, that makes a lot of sense now thanks for explaining this!
theres no way you can just throw the code into chatGPT and they fix it all lol thats emense
Ill have a look now, fix all the mistakes from chat and see if it works
it actually worked π the .hero-bg-wrapperr had a deliberate extra "r" on the end so I just changed that back and replaced the rest. Thanks a bunch!
highso.webflow.io
thats the animation
could probably be a little better but it will do for now
wow
looks fantastic
@ me on a tweet about this one!
@dmoco I think this video would be eye opening for you regarding HTML vs JS.
Web Bae
YouTube
Dissecting how Webflow makes a website
Let's explore how Webflow builds a website for us. We'll take a look at a very basic website built in replit and see how Webflow compares. Along the way we'll uncover how Webflow works, how it makes animations happen, how it gets things like lightboxes and sliders to work, and a surprising realization about jQuery π!
// FREE STUFF
πͺ My ULTIMAT...
Thanks for sending this over, ive watched it this morning, and was a refresher on some of the stuff Ive learned before at university but because I use webflow, I don't think to much of the style sheet, html and script pages lol so it was nice to think about how webflow is working in relation to them 3 docs. Whats sad is people can learn 1000 times what they can learn in uni from yours and others youtube videos. Not sad for you or me, but sad for the universitys. Tbf I was taking a digital media course with a "web design" module in comparison to say computer science which is a whole other ball game. @Web Bae
hahaha I feel you @dmoco . I didnt study any of this in college either ... learned it all with YT and just trial/error. I want to learn more design but still don't know where to get started though lol
gotta find a good YT channel i guess
good ol youtube, cant go wrong lol, I browse awwwards a lot just to get some inspo. Whats important to me though is colour palettes, and colour coordination. Someone could have amazing UI but if their colour picking isn't great than the overall feel is going to be off @Web Bae