code in desktop doesn't run on mobile help!

Ask the community
,
1

I’m using a very simple code to animate some text on my homepage but is not working on the mobile version, I’m a newbie in coding so I have no idea why.
please help!

$w.onReady(()=>{
 let sentence1 = $w('#text26')
 let sentence2 = $w('#text86')
 let sentence3 = $w('#text96')
 let myButton = $w('#button1')
 
    setTimeout(()=>{ sentence1.hide('fade'), sentence2.show('fade')},4000) 
    setTimeout(()=>{sentence2.hide('fade'), sentence3.show('fade')},8000) 
    setTimeout(()=> myButton.show('fade'),13000) 
})
2

The timeout first parameter is a callback function.
Fix “;” instead “,”
setTimeout (() => { sentence1 . hide ( ‘fade’ ); sentence2 . show ( ‘fade’ )}, 4000 )
setTimeout (() => { sentence2 . hide ( ‘fade’ ); sentence3 . show ( ‘fade’ )}, 8000 )
Insert {}
setTimeout (() => {myButton . show ( ‘fade’ )}, 13000 )

Check the errors on the editor hovering the mouse on red dot in the code panel.

3

Hello! thank you for your help. :slight_smile:
I change the “;” buti had to delete the “Insert {}” part because and error popup.
this is working fine on my desktop version my problems is that this doesn’t run on mobile, any idea why? or how can I make it work?
this is how it looks now:

2252×612 66.8 KB

4

Back to the roots… :grin:

https://www.wix.com/velo/forum/community-discussion/fade-in-and-fade-out-multiple-objects-on-homepage

5

@russian-dima :joy: im getting crazy,
so yes, now is working fine on both desktop and mobile,

this code is giving the parameters to fade out my elements. and that’s fine.
is there a code that can set up the fade in timing delay?
wix just let me delay an animation for up to 8 sec.
I mean… I need “#sentence86” to appear after 5 seconds of and “#text96” after another 5 seconds. because right now there’s no enough time to read the sentences. please help!

$w.onReady(()=>{
 let sentence1 = $w('#text26')
 let sentence2 = $w('#text86')
 let sentence3 = $w('#text96')
 let myButton = $w('#button1')
 
    setTimeout(()=>{ sentence1.hide('fade'); sentence2.show('fade')}, 4000) 
    setTimeout(()=>{sentence2.hide('fade'); sentence3.show('fade')}, 8000)  
    setTimeout(()=> {myButton.show('fade')}, 13000)
 
})
6

@manuelapblanco
Take a look here…
https://www.wix.com/velo/reference/$w/hiddenmixin/show

You can set-up the " delay ", " duration ", " direction " and some other animation-options, like for example the " intensity " as you want.

For this, you set up “options” for every animation.

Let us take the —> " fade "- animation .
It has the following OPTIONS …

let fadeOptions = {
  "duration":   2000,
  "delay":      1000
};

$w("#myElement").show("fade", fadeOptions);

As you can see, the FADE-ANIMATION has just 2-OPTIONS, which can be setted-up. Because it has for example → NO DIRECTION.

Now back to your EXAMPLE!


// User-Interface-----------------------------------------
var fadeDURATION = 500
var fadeDELAY = 50
// User-Interface-----------------------------------------

$w.onReady(()=>{
  let fadeOptions = {
    "duration":   fadeDURATION,
    "delay":      fadeDELAY
  };
  
 let sentence1 = $w('#text26')
 let sentence2 = $w('#text86')
 let sentence3 = $w('#text96')
 let myButton = $w('#button1')
 
    setTimeout(()=>{ sentence1.hide('fade'); sentence2.show('fade')}, 4000) 
    setTimeout(()=>{sentence2.hide('fade'); sentence3.show('fade')}, 8000)  
    setTimeout(()=> {myButton.show('fade')}, 13000)
 
})

The same way you can EXPAND your ANIMATION-OPTIONS for every kind of ANIMATIONS!

CORRECTION: Sorry forgot something in the CODE!

// User-Interface-----------------------------------------
var fadeDURATION = 500
var fadeDELAY = 50
// User-Interface-----------------------------------------

$w.onReady(()=>{
  let fadeOptions = {
    "duration":   fadeDURATION,
    "delay":      fadeDELAY
  };
  
 let sentence1 = $w('#text26')
 let sentence2 = $w('#text86')
 let sentence3 = $w('#text96')
 let myButton = $w('#button1')
 
  setTimeout(()=>{
      sentence1.hide('fade', fadeOptions); 
      sentence2.show('fade', fadeOptions)
  }, 4000) 
  
  setTimeout(()=>{
      sentence2.hide('fade', fadeOptions); 
      sentence3.show('fade', fadeOptions)
  }, 8000)  
  
  setTimeout(()=> {
      myButton.show('fade', fadeOptions)
  }, 13000)
})