It depends.
Here's a rule of thumb that I use:
- If it's JS used on all pages, I add it in a footer slot.
- If it's analytics, I add it to the project settings.
- If it's reused multiple times on a single page, I add it at the bottom outside of the slot.
- If it's for 1 item only, I include it within a group where that action happens. I put it at the bottom of that container for consistency.
You can probably find cases where you'll break your rules.
Jeremy you're absolutely genius. Thank you for putting in the time and effort to explain it to me!
I will take that rule of thumb and adopt it, I'll keep it in mind
I think managing animations is in the roadmap, but last time I saw it, it was the last or before the last on the timeline in Webstudio website
Δ°s it still in the plan? Would you guys want to make it like webflow and even better? (btw it's already incredible). I'm just saying that for noobies like me for example...
Oh I'm a big fan of John's amazing work. Thankfully it allowed me to use animation only with little knowledge in css variables
I still haven't got a grip on animotion to know if we can make a loop with one of the animations like slide
The biggest block I think I'm facing now is with the loop, but maybe if I added some JS code to it, I could work fine
I don't think his library handles things like looping/slider features. It's for simple animations.
If you can find an example of what you are looking to do, I could suggest how you'd create it.
Oh thank you so much Jeremy
I will send a youtube link, it's something similar
I'm trying to apply it on this
So it can Infinite loop in this container with a steady translate animation
Where are you stuck on that tutorial? Everything should be simple to translate into Webstudio. Maybe the hang-up point is the animation is done differently?
But the animation is the block I'm stuck at
I know how to translate and all
But I'm stuck at how to make the animation start when page loading and how to make it loop
We don't have "page load" state
Ah, you need the javascript. Do you know how to write js, or are you looking for a no-code solution? (You could also find that guy's client website in the video and take a look at his JS to copy what's applicable).
I found a simple CSS-only solution on Codepen that you shouldn't have an issue converting to Webstudio.
https://codepen.io/alializ/pen/OJEgxexI don't know why discord didn't send me a notification of your message π
I am ready to learn Java Script just to apply the animation lol
I will check codepen out too, hope I can find the way there
Uhm technical question, does animation make the page slow and laggy? π€
Btw, I found a resource site called SheCodes with an Ai bot that can write html, js, and css codes if you gave him a prompt
I tried it, it seems quite interesting. You can tell it to include variables so you can add specific values and link it to elements through ID and class
But I tried it out and didn't know what to do with the animation code. I tried to put the ID and all, but it didn't work maybe I've done some technical mistake.
I'll link the site here, it's an amazing resource with tons amazing stuff
SheCode also has tons of other interesting gradients that I used some
Animations can be bad for a few reasons. For example, if you're animating things that potentially change the layout, the browser needs to repaint and recalculate. It can also add overhead to the site in general with JS or CSS. There are numerous reasons that can affect performance. I only use animations when they help the user experience and will only do minor things, but that's my preference. I'm not building any sites that are looking for design awards. π
If you find a piece of code you like (on a site like codepen), try to replicate it in WS using tokens instead of classes. If there's JS involved you'll need to use data-attributes, classes or ids, and a html embed. Find something simple to try and follow along at first.
