Icon Transition Animation

[kgamble]

I am looking to recreate this Icon animation, I have figured out other animations and transitions in CSS.

I have tried adding a transition: 1s linear on the buttons props.image.icon.style but it doesn’t seem to capture it.

Any ideas?

[YF129701]

I can’t speak to your specific issue with this animation, but what I usually find is the problem when CSS styles don’t apply is that they’re applied at the wrong level (or on the incorrect HTML element, if you look at the markup). I’m assuming you have a state it will transition to already defined (on hover or whatever pseudo-class you’re using).

[Daniel.Snyder]

I’m not a CSS expert, but perhaps its because the path is not a style?

You might have to have 2 icons layered on top of each other to make this work…

[nicoli.liedtke]

I'm trying to improve my CSS and leveraging it in Ignition and saw this as a challenge since I'm not very experienced with css in general.

You can give rect instances in an embedded SVG a css class that animates it. In my implementation each rect has a 'fold' and an 'unfold' class that animates the rectangle to the folded or unfolded position. Then in ignition I added bindings so that when you click the SVG it alternates the css class attached to each rect between the 'fold' and 'unfold' version. Here's an example of the fold and unfold class for the middle rect

.psc-menu-middle-fold {
	animation-name: menu-middle-fold;
	animation-duration: 0.6s;
	transform-origin: center;
	animation-fill-mode: forwards;
	
}

.psc-menu-middle-unfold {
	animation-name: menu-middle-unfold;
	animation-duration: 0.6s;
	transform-origin: center;
	animation-fill-mode: forwards;	
}

And example keyframes

@keyframes menu-middle-fold {
  0% {
    transform: translateY(0);
  }

  50%{
    transform: translateY(-42.5px);
  }
  100% {
	transform: translateY(0px) rotate(-45deg) scale(1.25,1);
  }
}

@keyframes menu-middle-unfold {
  0% {
	transform: translateY(0px) rotate(-45deg) scale(1.25,1);
  }
  50% {
    transform: translateY(-42.5px) scale(1,1);
  }

  100% {
    transform: translateY(0);
  }
}

The differences between the fold and unfold version is just that they have their keyframes reversed. I tried simply changing the direction of the animation but this doesn't re-run the animation and it seems the animation-name needs to change in order to rerun the animation.

I'm pretty sure this could all be rewritten to use nth-child selectors instead of the separate classes, but have not tried that yet.

Here's a text file with my css.
menuSvgAnimations.txt (2.2 KB)

[kgamble]

@nicoli.liedtke

You can give rect instances in an embedded SVG a css class that animates it.

I didn’t really think about adding my own SVG in place for this, I was imagining with the built in icon but there is no reason I couldn’t just throw together my own? Ends up rendering to the webpage the same anyway.

[kgamble]

Sweet, it works!

Any idea why it triggers the animation automatically when the view opens or you go between preview and not-preview?

Here is my view (css is a direct copy):
X_Export.zip (2.1 KB)

[nicoli.liedtke]

Yeah it's just running through the animation since that is what it's being told to do. My 'fold' class has the animation starting unfolded and finishes folded.

The easiest solution might be to have the component startup script force an animationName = 'none' in the style of the component from the designer. Then delete that style after it's been clicked the first time. Not sure exactly how it might work, but I may be able to try to get that working in my off time.