Animate Box on click (Timeline Animation API)

Ask the community
,
1

Hello,
I am trying to make a box rotate clockwise and anticlockwise incrementally (10 degrees & -10 degrees) when an arrow is clicked (right/left arrow). I am using the Timeline Animation API, but when I click the button it only animates once and then I cant repeat the process. Can anybody help so that I can keep rotating the box whenever the button is clicked?

This is my code so far:

import { timeline } from ‘wix-animations’
import { formFactor } from ‘wix-window’

// Configure animation for mobile devices
const isMobile = formFactor === ‘Mobile’

$w.onReady(function () {

// Declare all elements in the animation: 
const arrowclock = $w('#vectorimage1') 
const arrowanticlock = $w('#vectorimage2') 
const clock = $w('#box1') 

// Create the individual animation timelines for clockwise and anticlockwise animations: 

// Rotate onClick: 
const rotclock = timeline() 
    .add(clock, { duration: 100, rotate: 10 }, 0) 

// Rotate (anti) onClick: 
const rotanticlock = timeline() 
    .add(clock, { duration: 100, rotate: -10 }, 0)	 


// Play ‘rotclock’ animation onclick: 
arrowclock.onClick(() => rotclock.play()) 

// Play ‘rotanticlock’ animation onclick: 
arrowanticlock.onClick(() => rotanticlock.play())

});

Thanks!

2

If I understand correctly, you want to keep rotating the box, maybe going full circle, but that rotation angle is a fixed number that corresponds to 10 degrees clockwise if its positive or -10 degrees anticlockwise. To do what I think you want to do it, you need to create a counter. Take a look on what I did with your code:

import { timeline } from "wix-animations"
import { formFactor } from "wix-window"

const isMobile = formFactor === "Mobile"

$w.onReady(function () {

    const arrowclock = $w("#vectorimage2")

    const arrowanticlock = $w("#vectorimage1")

    const clock = $w("#box1")
    let rotation = 0
    
    
    arrowclock.onClick(() => {
        rotation = incrementRotation(1, 10)
        const animation = timeline().add(clock, { duration: 100, rotate: rotation }, 0)
        animation.play()
    })
    arrowanticlock.onClick(() => {
        rotation = incrementRotation(-1, 10)
        const animation = timeline().add(clock, { duration: 100, rotate: rotation }, 0)
        animation.play()
    })

    const incrementRotation = (direction, increment) =>{
        rotation = rotation + (increment)*direction
        return rotation
    }
})

I created a function to increment the rotation upon a click. It has two parameters, direction either clockwise (a positive 1) or anticlockwise (a negative -1) and degrees.
See if it fits you and I’m here if you have any doubt.

One more thing, when coding in JavaScript, try to use camelCase creating your elements and variables (it is a convention) and use more descriptive names, that way you can get rid of comments.

Have a good one.

3

Hello Bruno,

Thank you very much for your help! This is exactly what I was looking for!

Kind regards,

Markos