Issue in animation

Design help Animations & Interactions
1

I am working on animation on CMS grid. its a hover animation. its not working properly. when I hover in animation it just works for 1 sec and move back to its original position but for some reason it works when I scroll up the page.

it would be great if someone can help me fix this issue?

image
image1920×991 174 KB

Here is my public share link: Webflow - Fitness Site Rebuild

2

@Port_of_Folio can you help on this?

3

Hi,
Right now you have the animation starting with properties applied to two elements (.service-offering and .heading-9) but ending with a different element (.service-wrapper). Typically, you will have the animation starting and ending with the same elements. And more common the in-hover will have “initial state” checked

If I understand your intention correctly:

  1. I think you can use an opacity animation here rather than the hide/show animation (unless I’m missing something)
  2. Start the hover-in animation with .service-offering set as “initial state” and opacity = 0%, and another initial state on this element with a move property with -20px.
  3. End the animation with the opacity changed to 100% and the move changed to 0px.
  4. For the hover-out, you will tell .service-offering to start with opacity=100% and move=0px. For hover-out, you will NOT have “initial state” checked, but you will want to change the starting duration at 0sec. Then have the end of the animation change back to opacity=0 and move=-20. This will return the elements to their non-hovered look.
4

@Port_of_Folio . Thanks for your tips. The animation is working but still works only when I scroll up the page from down. But not working at actually starting of the grid. Do you know possible reason for this?