Floating Animation for Pictures

Ask the community
,
1

Does anyone know how to create a floating animation (specifically for clickable elements)? Similar to this Squarespace tutorial ? Thanks.

2

That is done through custom CSS code that is shown on the left hand side of the screen that you have linked too, you can do your own CSS code and add it to Wix Editor through the html iframe.
https://support.wix.com/en/article/adding-html-code

Or you can look at what you can achieve through Wix’s own animations settings or with code through the effect options.
https://www.wix.com/corvid/reference/$w.EffectOptions.html

3

My issue is this - I want to add the floating effect to an element that already exists and I want that element to keep the same animation/functionality that it already uses. The element in question is the “Oxygen Eventworks” picture shown in the attached image. Is there a way to keep its existing functionality and also add the floating effect?

2551×1234 139 KB

4

Yeah, me too. I saw a tutorial but he did it in muse but maybe you can copy and paste the code in page code in dev mode, maybe that’ll work?

5

Hi Guys! Has anyone had any luck with this? I would also like to make images float. Did the code work?

6

Hi Guys! I did it :slight_smile: Just copy this code into the page code in DEV mode:

import wixAnimations from 'wix-animations';

// at "image1_viewportEnter" you need to change the "image1" to your own image/element ID (if you click on your image, the ID will show up here on the right side -->)
export function image1_viewportEnter(event) {
timeline.play(); 
}

let timeline = wixAnimations.timeline({"repeat": -1, "yoyo": true
});

//same here, change the "#image1" to your according ID
$w.onReady( function () {
 const myImage = $w("#image1");

//in this next block, you can change the properties of the animation. Play with it, change some settings and choose what fits you best :)
 timeline
    .add( myImage,
      {
 "y": -10,
 "duration": 4000,
 "easing": "easeInOutQuad"
     });
});

important: pay attention to the comments in the code!

FYI I have literally no / very, very basic coding/html/css/javascript skills. I did everything with this article:
wix-animations-frontend - Velo API Reference - Wix.com so if you need any more help, I recommend looking there :slight_smile:

7

@ Nicolas Steiger
Thank you so much. Worked for me.

8

The code above didn’t work for me, but I was able to use this article to customize my code:

import { timeline } from ‘wix-animations’

$w.onReady( function () {

timeline({repeat: - 1 , yoyo: true })

.add($w( ’ #rainbow ’ ), {y: 20 , duration: 1900 , easing: ‘easeInOutQuad’ })

.add($w( ’ #yo ’ ), {x: 70 , duration: 1900 , easing: ‘easeInOutQuad’ }, 0 )

.add($w( ’ #clouds ’ ), {x: 20 , duration: 1900 , easing: ‘easeInOutQuad’ }, 0 )

.add($w( ’ #pizza ’ ), {y: 20 , duration: 1900 , easing: ‘easeInOutQuad’ }, 0 )

.play()

});

Those are the basics for what helped me!

9

Thank you so much for the code. I’ve been looking to do this for a long time…:grinning:

10

@suomai777iamous I find these helpful pages by wix very difficult to come across or find again. So I try keep all the URLS in a notes doc so I can easily refer back.

11

@marsonhannah Im doing the same thing.