How to adjust Wix Animations (from Wix Timeline Animations) for the mobile?

Ask the community
,
1

Hello,

I recently made some animations using the Wix Timeline Animations API that were optimized for the laptop, i.e. I made an icon ( image22 ) move a certain pixel distance (timeline t1 ). However, when viewed from the mobile it moved alot more. Attached you find the code I wrote:

import {timeline} from 'wix-animations'
import { formFactor } from "wix-window"

const isMobile = formFactor === "Mobile"

let t1
import wixLocation from 'wix-location';
/* import lines*/

$w.onReady(function() {

    $w("#image20").hide();   
        t1 = timeline()
            .add($w('#image22'), {x:-100,duration:1000,easing: 'easeInOutQuad'})   
    
    
         $w('#image22').onClick((event, $w) => {
            t1.play()
        
        }); 
    
});

I tried to use this formFactor === “Mobile”, but it didn’t work. Is there any way I can specify a certain pixel movement which adjusts based on whether its a laptop screen or a mobile screen?

Thank you in advance!

2

I refactored your code a little bit and transformed the .add() method parameters to use a custom function that you can use to animate anything:

import { timeline } from 'wix-animations'
import { formFactor } from 'wix-window'

$w.onReady(() => {
    let t1 = timeline().add($w("#image22"), movement(-100))
    
    $w("#image22").onClick(() => t1.play())
})

function movement(x = 0, y = 0) {
    if (formFactor === "Mobile") {
        x = x + 50 //Here you correct the amount you need
    }
    return {
        x,
        y,
        duration: 1000,
        easing: "easeInOutQuad",
    }
}
3

Thank you very much! This is great and works perfectly