Parallax effect that looks like a video using lottie files (JSON)

Need help
1

Hi! :slight_smile: I need a cool scrolling effect like the one on this page: the-goonies.webflow.io

chrome-capture-2022-10-11 (2)

As you can see, when you scroll, an animation is displayed in the background. I’m using the parallax option (checkbox) on image backgrounds, but how am I supposed to generate the effect of an animation that looks similar to a video that plays back and forth depending on the scrolling position?

The effect I’d like to replicate has been built by a web developer (not using Bubble) and he’s used lottiefiles for the animation. I have the JSON files and I’d like to know if I can turn this into a Bubble effect. The JSON files look like this (this is just an excerpt):
{"v":"5.7.0","fr":60,"ip":0,"op":630,"w":1920,"h":1080,"nm":"Comp 1","ddd":0,"assets":[{"id":"comp_0","layers":[{"ddd":0,"ind":1,"ty":3,"nm":"Null 5","sr":1,"ks":{"o":{"a":0,"k":0,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[960,540,0],"ix":2},...

Note: I’ve also tried the free Lottie plugin, but I can’t control that the animation runs while I scroll and stops when I stop scrolling (there are actions only to start, pause and stop the animation, but not based on the scrolling). If there was a way to detect “when scroll is going down” and “when scroll is paused” and “when scroll is going up”, I could use it I think.

Thank you!

2

Hello!

We have a plugin called “Lottie-player + Scroll-Anim” where it is possible to use lottie animation in conjunction with screen scrolling.

Plugin page:

Demo:

If you’re interested, I can create a demo application with the “Lottie-player + Scroll-Animation” plugin enabled and full access, where you can check if this plugin works for you or not.

2 Likes
3

You can achieve it without a plugin, you need two group one top of other. On top one you also need to add you page content and other things.

On the bottom one put the image, and on the top one put the leaft image which shout only cover the corners.

When you start scrolling fade out the top group leaf image and make the text visible and at the same time let the bottom groups zoom little.

Thus you have it. :wink:

I can do it for you, for free. Only if you like you can give me a compensation els, keep it dont pay me.

5

That’d be awesome. If I could play around with it on Monday, it’d be fantastic in order to be able to test it out first. Thanks a lot!

6

Thanks for the proposal and instructions! However, it’s not exactly that animation what I want to build (2 images one on top of the other), but a smoother animation that looks like a video with vectors moving, so loading it from a JSON file (which is called lottiefiles). But thanks anyway!

7

I sent you a link to a test application in private messages.

1 Like
9

Thank you so much!

10

it would be nice, if you share it here, so that we all can benefits, but yah do make it every one can view. :slight_smile:

11

This topic was automatically closed after 70 days. New replies are no longer allowed.