Is Smooth Animation possible?

Ask the community
,
1


This is what I’d like to achieve.


This is what I got. Is there a way to animate a single element maybe, to avoid the broken animation feel?

2

How did you do that?
using wix-animations ?

3

Sorry, forgot to mention, I used hover boxes for that. Is it possible using wix-animations ?

4

@iamhapot I think it’s possible. Try it and let us know.

5

@jonatandor35 Alright! :+1:t3:

6


Well, that worked out pretty well. Thanks, @jonatandor35 I’ll also put the code here in some time, if anybody’s interested in some easy animations. :v:t2:

7

Total of four elements in the scene
Smooth Animation: #title (ID in properties panel)
Line: #line1 (Hidden on load)

Wix Animation Ex.: #title1
Line: #line2 (Hidden on load)

CODE:

import {timeline} from ‘wix-animations’

let fadeOptions = {
“duration”: 400,
“delay”: 0
};

$w.onReady(function () {

const target4 = $w('#title'); 
const target3 = $w('#line1'); 
const target2 = $w('#title1'); 
const target1 = $w('#line2');

//For First text and line shape
$w(‘#title’).onMouseIn(() => {
$w(“#line1”). show()

timeline() 
	.add(target4, {y: 0, x: 40, scale: 1, duration: 400, easing: 'easeOutCirc'}, 0) 
	.add(target3, {y: 0, x: 80, scale: 1, duration: 400, easing: 'easeOutCirc'}, 0) 
	.play()

})

$w(‘#title’).onMouseOut(() => {

const reset = {y: 0, x: 0, scale: 1, duration: 600, easing: 'easeOutCirc'}; 
$w("#line1"). hide("fade", fadeOptions) 
timeline() 
	.add(target4, reset, 0) 
	.add(target3, reset, 0) 
	.play()

})

//For Second text and line shape
$w(‘#title1’).onMouseIn(() => {
$w(“#line2”). show()

timeline() 
	.add(target2, {y: 0, x: 40, scale: 1, duration: 400, easing: 'easeOutCirc'}, 0) 
	.add(target1, {y: 0, x: 80, scale: 1, duration: 400, easing: 'easeOutCirc'}, 0) 
	.play()

})

$w(‘#title1’).onMouseOut(() => {

const reset = {y: 0, x: 0, scale: 1, duration: 600, easing: 'easeOutCirc'}; 
$w("#line2"). hide("fade", fadeOptions) 
timeline() 
	.add(target2, reset, 0) 
	.add(target1, reset, 0) 
	.play()

})

});

8

Well done.