Highlighted

Why do my button graphic background images change size when I apply a transition?

Community Beginner ,
Oct 06, 2017

Copy link to clipboard

Copied

Can anyone explain to me why the button graphic (applied as background fill in a standard Accordion Widget) changes size when I select a transition, and how to make it stop? See graphic attached.

Transition_problem 2.jpg

Here are my transition settings:

Screen Shot 2017-10-06 at 7.14.51 PM.png

Thanks!

William

Issue is simple to solve.

  • First try the following to illustrate the problem:
  • Select the label of your accordion and look into the „Fill“ panel state by state.
  • Set the icon size in every state to „Original Size" and resize the label, until the icon is completely visible.

You’ll see: The magnifying effect is gone. It happens, because the browser loads the original size first and then reduces it to the needed size. And this is visible.

Solution:

  • Use no transition effect between the single states or
  • place the SVGs in original size – what means in your case: Look, which pixel size is needed, go to Illustrator and reduce the SVG to this size.

Views

194

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Why do my button graphic background images change size when I apply a transition?

Community Beginner ,
Oct 06, 2017

Copy link to clipboard

Copied

Can anyone explain to me why the button graphic (applied as background fill in a standard Accordion Widget) changes size when I select a transition, and how to make it stop? See graphic attached.

Transition_problem 2.jpg

Here are my transition settings:

Screen Shot 2017-10-06 at 7.14.51 PM.png

Thanks!

William

Issue is simple to solve.

  • First try the following to illustrate the problem:
  • Select the label of your accordion and look into the „Fill“ panel state by state.
  • Set the icon size in every state to „Original Size" and resize the label, until the icon is completely visible.

You’ll see: The magnifying effect is gone. It happens, because the browser loads the original size first and then reduces it to the needed size. And this is visible.

Solution:

  • Use no transition effect between the single states or
  • place the SVGs in original size – what means in your case: Look, which pixel size is needed, go to Illustrator and reduce the SVG to this size.

Views

195

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Oct 06, 2017 0
Adobe Community Professional ,
Oct 06, 2017

Copy link to clipboard

Copied

Could you provide a.muse? Simply one page only with your menu and if you like a colored placeholder below the menu to watch?

Best Regards,

Uwe

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 06, 2017 0
Community Beginner ,
Oct 09, 2017

Copy link to clipboard

Copied

Thanks for responding fotroeder. Here's a link to the Muse and the two linked SVG files.

nav - Google Drive

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 09, 2017 0
Adobe Community Professional ,
Oct 09, 2017

Copy link to clipboard

Copied

I cannot detect where this comes from.

I am wondering why your .muse is quite empty but weighs 55,5 MB?

I tried other svg files but have almost the same behavior.

Best Regards,

Uwe

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 09, 2017 0
Community Beginner ,
Oct 09, 2017

Copy link to clipboard

Copied

A test on my end making a new accordion menu in a completely new site yielded the same shrinking graphic in the transition. I'm not sure what else to do.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 09, 2017 0
LEGEND ,
Oct 10, 2017

Copy link to clipboard

Copied

Issue is simple to solve.

  • First try the following to illustrate the problem:
  • Select the label of your accordion and look into the „Fill“ panel state by state.
  • Set the icon size in every state to „Original Size" and resize the label, until the icon is completely visible.

You’ll see: The magnifying effect is gone. It happens, because the browser loads the original size first and then reduces it to the needed size. And this is visible.

Solution:

  • Use no transition effect between the single states or
  • place the SVGs in original size – what means in your case: Look, which pixel size is needed, go to Illustrator and reduce the SVG to this size.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 10, 2017 1
Community Beginner ,
Oct 10, 2017

Copy link to clipboard

Copied

Thank you for your help, Günter! Very much appreciated. This was very helpful.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 10, 2017 0