Topic: Start Chart animation after WOW animation

Volodymyr Yatsynych pro asked 5 years ago

I have a few elements on the page that contain animation & canvas for Chart: <div class="wow fadeInRightBig" data-wow-delay="0.3s"> ... <canvas id="chart-1"></canvas> </div> How to start Chart animation after parent container animation finished?

Adrian Sawicki free answered 5 years ago

Hello, You can do a few things to solve it. 1 - set a longer animationSteps ( animationSteps which u wanted + parent element data-wow-delay). It's not a perfect solution but it's easy to implement. 2 - you can setTimeout on your chart. 3 - you can setTimeout and use a function to check if the chart is in view( when a user scrolls to it). Good example of it is on StackOverflow I hope those answers helped you this time. Regards, Adrian

This is not correct. Need callback:
new WOW({ callback: afterChart }).init();

function afterChart( el )
	el.addEventListener('animationend', function( event )
		// Code

Adrian Sawicki free answered 5 years ago

Hello Volodymyr Yatsynych, You can set longer data-wow-delay on your child elements. Regards, Adrian

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.


Specification of the issue

  • User: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No