Jump to content

Trigger animation on scroll

Recommended Posts

Hi all!

I created line animation on my client's website (all the horizontal lines) but I would like the animation to be triggered only on scroll... and I don't understand how to do that...

https://cassia-construction.squarespace.com/
password: freelance

Here's the code I use for the line animation:

// -- Using a code block -- //
<div class="vl-h"></div>

// -- In the CSS panel -- //
div .vl-h{
  height:0px;
  width:1px;
  border-bottom:1px solid #000;
  
  -webkit-animation: increase 3s;
  -moz-animation:    increase 3s; 
  -o-animation:      increase 3s; 
  animation:         increase 3s; 
  animation-fill-mode: forwards;
}

@keyframes increase {
    100% {
        width: 100%;
    }
}

Thanks for your help!!!

 

Link to comment
  • Replies 1
  • Views 883
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.