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?
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.
I found a very straight forward way to achieve that. Let’s take your first tab Add your Company.
duplicate the animation you made for the “Tab in view” trigger, and call it “Compliance Tab Out”
affect this ne animation to the “Tab out of view” trigger
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.
The result must look like this:
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”.
Is it an original design or did you based this site on an existing template?