Animating a chart on scroll


Topic: Animating a chart on scroll

Michael Ladt pro premium priority asked a week ago

Using a horizontal bar chart I would like to see if I can animate it on scroll and also change the color of the lines behind the bars.


Marcin Luczak staff answered a week ago

Hi,

You can't animate charts directly with your custom function, however, you can change any data and any option on scroll event, which will cause the chart to animate. Please see my snippet: https://mdbootstrap.com/snippets/jquery/marcin-luczak/3035897.

Keep coding,

Marcin from MDB


Michael Ladt pro premium priority commented a week ago

This is helpful but I am a little bit confused, how do I get them to start at 0 and only animate 1 time once the chart is in view?


Marcin Luczak staff commented a week ago

I've refactored my snippet so the chart is animated and filled with data only once, 500ms after the page is loaded. To achieve this you have to set the default values to 0 (at line 9 of js) and update them in $(document).ready(()=>{} block.

I hope this answers your question :)


Michael Ladt pro premium priority commented a week ago

I appreciate it but I wanted to get it to animate once, on scroll. Once it enters the viewport the animation starts and ends. Is this possible? Thanks again for your help.


Marcin Luczak staff commented a week ago

To make it work I've refactored the snippet and added an IntersectionObserver that will observe the chart and run the animation once 50% of the chart's height is visible in the viewport (threshold option). If you would like to customize it yourself please use the IntersectionObserver API https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

Keep coding,

Marcin


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: MDB jQuery
  • MDB Version: MDB4 4.19.2
  • Device: Mac
  • Browser: Chrome
  • OS: Big Sur
  • Provided sample code: No
  • Provided link: No