Is Smooth Animation possible?

Ask the community
,
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()

})

});