Image and Text Animation - for real?

Ask the community
,
1

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()
})
});

2
  1. Yes, wix-animations is an API. And it exists. See the wix-animation API docs .
  2. Obvious errors? Well, I don’t see any. So no obvious errors. Perhaps some not obvious errors?

Try using console.log() statements inside of your onMouseIn() and onMouseOut() event handlers and see if these functions are being triggered.

3

Yisrael, thank you for your response.

Actually, ‘wix-animations’ doesn’t seem to appear in search of docs, but I did review it in corvid/reference. Curious?

To test onMouseIn and onMouseOut, I added hide and show to image 12. That functions correctly in code below - but no animation.

Question #1: Have you ever used ‘wix-animations’ successfully?

Question #2: Could you drop this code into a test page and see if it will work for you?

Thanks in advance for any insight into this animation feature!

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(() => {
$w(‘#image12’).hide();
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(() => {
$w(‘#image12’).show();
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()
})
});

4

In response to questions #1 and #2… yes, I’ve tried wix-animations. I tried the Image and Text Animation example myself and it works fine. Does this example work for you?

5

  1. Yes, the Image and Text Animation example that appears at https://www.wix.com/corvid/examples plays fine. But when I copy the code and place it on my WIX webpage, it doesn’t play.

  2. If you can place the code and it plays, then I’m overlooking something very basic about WIX code.

  3. Here is a screen shot showing the elements in place on page and code below. Dev Mode is turned on. It is such a simple piece of code, why isn’t it working? Yisrael, your input is much appreciated!

1077×1138 156 KB

6

One thing I see is that the title (#text1) is inside of #box, whereas in the example it is outside. Not sure how that changes things however.

Please post the editor URL of your site and I’ll take a look. Only authorized Wix personnel can get access to your site in the editor. Please include the name of the page involved.

7

I don’t think the problem is placement of elements. I’ve tried all combinations and there is no change in performance.

Let’s take a look at a simpler animation experiment. This code is titled: Create a timeline, add animation attributes, and add buttons for controlling timeline playback and appears appears in Corvid Reference at: https://www.wix.com/corvid/reference/wix-animations.html#TimeLineOptions .

It seems like this code should rotate and scale an image when the page loads. Unfortunately it does nothing on my webpage. No errors, no. nada.

Yisrael, I would consider it a personal favor if you could load this snippet on you computer and tell us if it works. Thank you.

import wixAnimations from ‘wix-animations’;
let timeline = wixAnimations.timeline();
$w.onReady( function () {
const target1 = $w(“#image13”);
timeline
.add(
[target1],
{
“rotate”: 360,
“scale”: .5,
“duration”: 1000
}
)
.play();
});

8

Yisrael, If the ‘wix-animations’ code works, it looks like it could be used to build something like your clever Coupon Spinner at https://www.grampsworkbench.com/Examples/Coupon-Spinner .

9

I’ll look at your site if you send the URL as I requested earlier.

10

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…

  1. Home page is the Wix Tutorial which has just been copied and pasted from example itself;

  2. Second page is the same design as the tutorial made by myself;

  3. Third page is same design but with pics at random placements;

  4. 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. :wink:

11

Thank you Yisrael and GOS for your helpful input. The problem is solved.

It seems that effect called up from ‘wix-animations’ API only appear on a live website after it has been published to the internet. The effects do no appear in PREVIEW, even after being saved. This is probably too obvious to be considered by skilled programmers. Being a raw newbie, I just assumed that PREVIEW would show the effects of Corvid code. I’m just glad that the animation code is real.

The animation tests can be viewed at: https://craig3598.wixsite.com/website/code-page

12

It works in both preview and live versions for myself.

Here is the preview versions which show it working.

1135×923 167 KB

1141×883 107 KB

1129×883 88.4 KB

13

As @givemeawhisky states, it works in both Preview and Live, and I certainly tried this in both modes before posting that it works.

If you need further details or clarification, I would recommend contacting the Wix support team .