WIX/Corvid has this "Explore Examples" nifty item at:
www.wix.com/corvid/example/image-and-text-animation
It's called Image and Text Animation and uses something called 'wix-animations' to animate images and text. The on-screen example works great. But when I set it up on a page of my WIX website, it doesn't work. No errors - it just sets there.
The first line of code is:
import {timeline} from 'wix-animations'
Question #1: Does 'wix-animations' actually exist? Is it an API? I would ask the nice folks at WIX, except I can't figure out how. And in any case this seems to be a Corvid issue.
Question #2: Am I overlooking some obvious dumb error with my code below?
I'd really appreciate it if someone could help me with this.
import {timeline} from 'wix-animations'
$w.onReady(function () {
const target1 = $w('#image13');
const target2 = $w('#image12');
const target3 = $w('#image11');
const target4 = $w('#text1');
$w('#box1').onMouseIn(() => {
timeline()
.add(target1, {y: 40, x: -280, scale: 1, duration: 600, easing: 'easeOutCirc'})
.add(target2, {y: 0, x: 0, scale: 1, duration: 600, easing: 'easeOutCirc'}, 0)
.add(target3, {y: -40, x: 280, scale: 1, duration: 600, easing: 'easeOutCirc'}, 0)
.add(target4, {y: -60, x: 0, scale: 1.15, duration: 400, easing: 'easeOutCirc'}, 0)
.play()
})
$w('#box1').onMouseOut(() => {
const reset = {y: 0, x: 0, scale: 1, duration: 600, easing: 'easeOutCirc'};
timeline()
.add(target1, reset)
.add(target2, reset, 0)
.add(target3, reset, 0)
.add(target4, reset, 0)
.play()
})
});
Just to add to Yisrael's posts above, Wix Animations API is available already.
https://www.wix.com/release/notes
I have also tested the Wix Animation example on a new blank site and it all works fine for me.
I have created the tutorial page itself as this...
Home page is the Wix Tutorial which has just been copied and pasted from example itself;
Second page is the same design as the tutorial made by myself;
Third page is same design but with pics at random placements;
Last page is your sample code that you are wondering about.
You can see the website working here.
https://givemeawhisky.wixsite.com/animation
One final note to make is that in your picture you seem to have ALL your elements in your container box, which is not how the tutorial is setup.
If you follow the tutorial correctly, you will see that the container box is only having the three images attached to it and is being called #hoverArea
Ah okay Yisrael had already mentioned to you about that. 😉