Lottie animations positioning

Issues related to previewing and publishing your web site.
Post Reply
MichaelLloyd
 
 
Posts: 36
Joined: Sat Jul 02, 2016 12:20 am
Location: Anaheim, California
Contact:

Lottie animations positioning

Post 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.
User avatar
crispy68
 
 
Posts: 2737
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Lottie animations positioning

Post by crispy68 »

Do you have a demo project .wbs you can share?
MichaelLloyd
 
 
Posts: 36
Joined: Sat Jul 02, 2016 12:20 am
Location: Anaheim, California
Contact:

Re: Lottie animations positioning

Post 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.
Last edited by MichaelLloyd on Sun Jan 16, 2022 9:42 pm, edited 5 times in total.
User avatar
crispy68
 
 
Posts: 2737
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Lottie animations positioning

Post 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
MichaelLloyd
 
 
Posts: 36
Joined: Sat Jul 02, 2016 12:20 am
Location: Anaheim, California
Contact:

Re: Lottie animations positioning

Post 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.
User avatar
Pablo
 
Posts: 21569
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Lottie animations positioning

Post 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
Post Reply