Replay DIV Animation in Tabs

Design help Animations & Interactions
1

Hello, Webflow community!

I’m hoping someone can help with a little interaction wall I’m running into.

When you view the site I’m building (preview link below), you can see a set of tabs when you scroll down the homepage. Right now, I only have a single element animated to grow upon scrolling into view. What I’m looking to do is have that little bubble grow in again when I click back into that active tab. Meaning, how can I reset the animation each time you click the active tab again?

Here is my public share link: Webflow - INFIMA

2

I think you’re almost there.

You’re properly using the TAB trigger for your animations to play upon opening a tab.

I think you need to “undo” those animations when “Tab is out of view”, so that the elements can be animated again upon re-entering the tabs.

http://vincent.polenordstudio.fr/snap/w20uy.jpg

I found a very straight forward way to achieve that. Let’s take your first tab Add your Company.

  1. duplicate the animation you made for the “Tab in view” trigger, and call it “Compliance Tab Out”
  2. affect this ne animation to the “Tab out of view” trigger

http://vincent.polenordstudio.fr/snap/ybktu.jpg

  1. edit the animation: Start by removing all steps that aren’t Initial State, then remove all the “Initial State” attribute from the steps left, then regroup them.

http://vincent.polenordstudio.fr/snap/qyx54.jpg

The result must look like this:

http://vincent.polenordstudio.fr/snap/lrulf.jpg

  1. now it works quite well. The animation is zeroed upon leaving the tab and plays again upon entering. The fact that you have an animation set with another trigger (scrolling) doesn’t affect this “loop”.

http://vincent.polenordstudio.fr/snap/gtfp9.mp4

Is it an original design or did you based this site on an existing template?

1 Like
3

Dude! You’re a genious. I seriously appreciate all of this. I’ll give it a shot and let you know how it goes.

This is an original design for a client :slight_smile:

1 Like
4

Worked like a charm! Thanks again!

1 Like
5

I find it clean, clear and well balanced, the design appropriates brilliantly the recent trends and your color palette is perfect. It’s in the details :slight_smile: Good job! I’m taking inspiration.

1 Like