Wix Animations using Velo for Beginners (Wix Code)

[@stevechouliareas1907]

Hey, it would be great to see a tutorial for creating a parallax effect on scroll but only on an image or a line. Would you know how to do that? I'm looking to create an effect that vertical and or horizontal lines move up/down/side/etc. as you scroll down a screen

[@arthurgentil9875]

Hey nice video. Would it be possible to add the same effect twice with different parameters?

[@CreativelyNino]

Thank you, and yes it is possible. Would you like a tutorial on this?

[@arthurgentil9875]

@@CreativelyNino That would be great! Thank you!

[@CreativelyNino]

Cooking it right up! Stay tuned!

[@thegabriel638]

Hey Nino thanks for the tutorial, you really helped me but abusing my stay let me ask you one more thing xD Is there a way to make the slide animation instead of going from left to right/right to left, go downwards, up to down, i find it funny that the normal mode animations let you do this but "directions" in code only works sideways, please help

[@CreativelyNino]

Hey Biel, thanks for commenting, I believe that Wix has directions that are top and bottom or have direction via integers. Let me know if you need me to do a walk through tutorial to explain but hopefully this helps. Let me know if you need anything or head on over to my website to ask more questions. Stay safe, cheers!

[@kot1pelto]

That's great, but how do you do this happen to a button or a vector that contains a link. It seems that when it contains a link everything else just stops working.

[@CreativelyNino]

Hey Timo, thanks for tuning in! I would say that you do an onClick function for both the button and/or vector. Then you can use the wixLocation in order to take the user to another page. Check out the corvid references about wix locations here bit.ly/corvidreferences or stay tuned for my tutorials about wix locations! Hope this helps, let me know if you need anything else or just head on over to my website ( bit.ly/creativelynino) to contact me. Subscribe for more tutorials coming soon!

[@NeutonJuniorfibonacci]

how to make the image appear only when you click the button?

[@NeutonJuniorfibonacci]

found out here. The code for those who wish is: export function btnNotifica_click(event) { if( $w("#caixanotifica").collapsed ) { $w("#caixanotifica").expand(); } else { $w("#caixanotifica").collapse(); }

[@CreativelyNino]

Hey Junior, thanks for commenting. I would like to pitch in if you don't mind. You can also do a one-line code conditional statement shown below: export function buttonIDname_click(event) { ( $w("#buttonIDname").collapsed ) ? $w("#buttonIDname").expand() : $w("#buttonIDname").collapse(); } Just another way of doing an if-else statement. I just used a ternary condition to save space for other code you might want to put into the function. Keep on coding and having fun with Corvid. Let me know if you have any other questions. Subscribe for more tips and tricks at your fingertips!

[@rafafarias6171]

in case i want to use the animation "slide" or "reveal", how do I set the direction?

[@CreativelyNino]

Hey Rafa, thanks for listening, you can easily do it this way: For Slide: let slideOptions = { "duration": 2000, "delay": 1000, "direction": "left" }; $w("#ElementID").show("slide", slideOptions); For Reveal: let rollOptions = { "duration": 2000, "delay": 1000, "direction": "left" }; $w("#ElementID").show("roll", rollOptions); If you have any more questions and want more of a one on one session, then head on over to my website (bit.ly/3dBB4Jp). Subscribe for more exciting tutorials to come!

[@eggwebtut5198]

It does not work anymore.

[@CreativelyNino]

Hey, thanks for commenting, what is it specifically that is holding you up? I hope to help as best as I can!

[@eggwebtut5198]

@@CreativelyNino When I finished, I went to preview and it didn’t work. The image did not animate.

[@CreativelyNino]

Okay let's troubleshoot this. What do you have for your code?

[@eggwebtut5198]

@@CreativelyNino The same that you put in the video. Maybe I wrote something wrong. If you want you can email me at [e-mail] and we can see what is wrong with the code.

[@CreativelyNino]

Hey, were you able to get the code to work? If not head on over to my website and lets chat! Just click contact in the menu or scroll down to the bottom of the page. bit.ly/creativelynino