On this site, I progress bars that are programmed to display the % of the goal achieved of signatures for each petition. It fetched the data with with some custom code and CMS.
Before I added this custom code (which will save my client’s a lot of time since he won’t have to change the size of the progress bar manually), I had 2 animations that really looked cool but now that I have embed HTML, it looks like I can’t animate it anymore.
The first animation was that the progress bar filled as you “scroll into view”. It starts empty and it fills up to the % the petition is supposed to when it scrolls into view.
The second animation was when you hover on the progress bar, it fills completely to 100%
Is there a way to trigger some animations on webflow natively? If not, I would think that with some custom code, this would be possible. Would be really greatful if someone could help building those 2 animations (natively or with CSS code).
hi @Marc_Copywriting here is simple CSS animation that will trigger on page load. That’s why I have add optional delay. If you would like to add animation on page scroll you will need custom JS to implement intersection Observer
@Stan you’re awesome, they way you provided the solution so easily amazes me (easy to say for me since I’m a beginner).
Copied the code and it worked as expected.
Since I have the privilege to be helped by a genius like, would you mind giving me some help to have the first animation (progress bar that fills) when scrolling into view instead of triggering it after 1.5s?
hi @Marc_Copywriting as I have mentioned animation based on scroll is more complex (using intersection observer.) then these simple solutions. Maybe someone else will be able to create code for you or if you would like you can consider to hire me.
