I want to make a webpage similar to a slide. I want to use wix API animation function in the loop statement when programming. I don’t know if it is possible.
Below is the result I want. But the loop statement is not used when programming, so it looks very long. I want to know if I can rewrite this program with a loop statement. Thank you.
This is the code.
import wixAnimations from ‘wix-animations’ ;
let timeline = wixAnimations.timeline({});
$w.onReady( function () {
const myImage = $w( “#myImage” );
timeline
.add( myImage, {
“x” : “+=30” ,
“opacity” : 0.9 ,
“duration” : 100
}
)
.add( myImage, {
“x” : “+=30” ,
“opacity” : 0.8 ,
“duration” : 100
}
)
.add( myImage, {
“x” : “+=30” ,
“opacity” : 0.7 ,
“duration” : 100
}
)
.add( myImage, {
“x” : “+=30” ,
“opacity” : 0.7 ,
“duration” : 100
}
)
.add( myImage, {
“x” : “+=30” ,
“opacity” : 0.5 ,
“duration” : 100
}
)
.add( myImage, {
“x” : “+=30” ,
“opacity” : 0.5 ,
“duration” : 100
}
)
.add( myImage, {
“x” : “+=30” ,
“opacity” : 0.5 ,
“duration” : 100
}
)
.add( myImage, {
“x” : “+=30” ,
“opacity” : 0.5 ,
“duration” : 100
}
).add( myImage, {
“x” : “+=30” ,
“opacity” : 0.1 ,
“duration” : 100
}
)
.add( myImage, {
“x” : “+=30” ,
“opacity” : 0 ,
“duration” : 100
}
)
;
} );
export function replayButton_click(event) {
//Add your code for this event here:
timeline.replay();
}