Page 1 of 1

Lottie animations positioning

Posted: Sat Jan 15, 2022 12:40 am
by MichaelLloyd
With what might be considered exhaustive attempts, I have been unable to raise a Lottie animations (by 8 to 10mm) within a Layout Grid.

Specifically I have text in an adjacent (left) column, with the Lottie in an adjacent column.
My intention is to have the Lottie raised slightly to be more in line with the text.
I tried Layout Grid column specific bottom padding, and inserted a Shape (SVG and PNG) under the Lottie, each with no effect.

I am referencing the Lottie(s) from LottieFiles, using the first (top) of the three provided URLs.
  • Is this impossible?
  • Is there an effective alternative I might not have tried?
  • Or is there something that can be done to support this behavior in the Web Builder Lottie facility?

Interestingly, contrary to the Lottie Animations tutorial document Note, I am having no trouble previewing the Lottie locally, without a server installed.

Re: Lottie animations positioning

Posted: Sat Jan 15, 2022 1:04 am
by crispy68
Do you have a demo project .wbs you can share?

Re: Lottie animations positioning

Posted: Sun Jan 16, 2022 6:52 pm
by MichaelLloyd
Hay Crispy,

Lotte issue: About page
Transparency/presentation issue: Home page


Do you have access to Support@PabloSoftwareSolutions.com?
Otherwise, how would you like me to make the WBS available?
oh, and... Thank you!

I developed another issue, this morning I expect this requires exploring the WBS file...
Trying to get elements in Layout Grids (transparent backgrounds) to scroll over a 'Fixed' image. The Layout Grid elements are scrolling over the Fixed image, however the areas intended to be transparent are white. OMG!!!

I have been a computer technician since the early days, and prefer to solve my own problems, you know... to not be as much of a burden on others ─ but damn!

I'm sending my WBS to: Support@PabloSoftwareSolutions.com
Let me know if you prefer I send it elsewhere.

Re: Lottie animations positioning

Posted: Sun Jan 16, 2022 7:18 pm
by crispy68
Hey Michael,

I do not have access to Support@Pablo......

However, you can either upload it to your server and provide a link to it here in the forum or you can send it via to me at ron@wizbangwebdesign.com

Re: Lottie animations positioning

Posted: Sun Jan 16, 2022 9:24 pm
by MichaelLloyd
Crispy,

I forwarded my WBS document and related image to ron@wizbangwebdesign.com.

Emailed WBS file demonstrates both issues.
Live website: StrategicHolisticSolutions.com ─ Lottie issue on About page is demonstrated, other issue is not.

Thank you for your help... I mean that.

Re: Lottie animations positioning

Posted: Mon Jan 17, 2022 7:22 am
by Pablo
The reason why the lottie animation is not inline with the text is because the animation itself has margin at the top and bottom.
This cannot be controlled by WWB, because there is no way to modify content of the animation.

Using (fixed) padding will not have any effect, because animation is dynamically scaled based on the size of the layout grid.

As a possible solution is to apply a transform to the object (via transitions)
For example:
Trigger: default
Property: transform
Translate Y: -25%

Image