I'm a high school student working on my personal website, and I'm looking for some guidance on implementing a fade-up animation. Right now, I have a fade-up effect set up on my homepage, using CSS keyframes and animation delays. What I want to achieve is for this animation to occur only once when someone visits the site. However, if the user closes their tab or browser, I want the animation to play again the next time they visit. I'm still early in my JavaScript journey, and I hope you guys can help me out! Thanks!
5 Answers
You might not need JavaScript for this if you trigger the animation based on when elements enter the viewport. This way, it will run once per visit and can animate again on the next visit. Just make sure to consider how you define a "visit" though.
You’d still need JS to detect when elements are in the viewport unless you're using some CSS tricks. Can you do that with pure CSS, or does it require JS?
Using JavaScript events could work. You can set up the fade animation within an onLoad event. This way, it only plays once after everything is loaded on the page.
Check out this link for some ideas on animation in JavaScript: https://chatgpt.com/s/t_688b8c729d3881918140de135764a5a4
Haha, fade-up, am I right? 😂 Seriously though, good luck with your website!
Session storage could be your friend! Once the animation runs the first time, save a flag in session storage. That will let you control when to apply the animation class on subsequent loads, with examples available online.
Good point! Defining a visit can get tricky—are you referring to going back to the homepage or the entire site? If it's a Single Page Application (SPA), that could change things too.