CODEWITHSUNDEEP
javascripthtmlcssanimationcss-animations
Chspsa
Chspsa

Reputation: 207

How to set animation-fill-mode of in parameters of .animate function vanilla JS?

I am struggling to find documentation or examples of the method in vanilla JavaScript that allows me to set the animation-fill-mode. I am using the Element.animate(animation, timing) function to achieve this.

I have attempted adding animation-fill-mode to the entries of the timing object, but it is not a valid parameter according to my tests. I have also attempted to use Animation.onfinish and Animation.pause() in tandem to pause it when it completes, but that also does not work. Here is all the code that this uses:

const quotemove = [
    { transform: "translate(0vw) rotate(0deg)" },
    { transform: "translate(80vw) rotate(180deg)" }
]

const quotetiming = {
    duration: 1000,
    iterations: 1,
    // this is where i attempted to add fill mode    
}

const quoteholders = document.getElementsByClassName("quote")
for(let i = 0; i < quoteholders.length; i++) {
    let quoteholder = quoteholders.item(i)
    const quotemark = quoteholder.querySelector(".quotationmark")
    quoteholder.addEventListener("mouseover", () => {
        let animation = quotemark.animate(quotemove, quotetiming)
    })     
}

I should also mention that I intend on adding another animation to the mouseout event so that it stays in one position while you hover, and another when not.

If it is not possible to set the fill mode to forwards and in the future implement the above request, then is there another similar approach I should consider? I appreciate it.

Upvotes: 2

Views: 1184

Answers (1)

Kaiido
Kaiido

Reputation: 137074

Your quotetiming KeyframeEffect object would be the right place.
Not sure what you did wrong, what you need is to set the fill property:

const quotemove = [
    { transform: "translate(0vw) rotate(0deg)" },
    { transform: "translate(80vw) rotate(180deg)" }
]

const quotetiming = {
    duration: 1000,
    iterations: 1,
    fill: "forwards"
}

const quoteholders = document.getElementsByClassName("quote")
for(let i = 0; i < quoteholders.length; i++) {
    let quoteholder = quoteholders.item(i)
    const quotemark = quoteholder.querySelector(".quotationmark")
    quoteholder.addEventListener("mouseover", () => {
        let animation = quotemark.animate(quotemove, quotetiming)
    })     
}
.quote {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: lightgray;
}
blockquote {
  background: ivory;
  transform-origin: center;
  display: inline-block;
}
<div class="quote">
  <blockquote class="quotationmark">Hover the page</blockquote>
</div>

Upvotes: 5

Related Questions