sarcadass / granim.js

Create fluid and interactive gradient animations with this small javascript library.
https://sarcadass.github.io/granim.js/
MIT License
5.29k stars 234 forks source link

Change defaultStateName based on page #38

Closed kaleidografik closed 6 years ago

kaleidografik commented 6 years ago

Hello. The site I am developing has a range of different states based on the specific colour palette of that page.

I would like to know if it would be possible to change the defaultStateName based on the current page being viewed? For example, I am using the below code to check the page and then change the state, but I'd like to adjust this so that I can simply switch the default state when changing pages. How could I incorporate something like this into the Granim settings?

Thanks.

if ($("body").hasClass("page-life")) {
    console.log('this page is life!')
    menuInstance.changeState('life-state');
}
sarcadass commented 6 years ago

Hello, If your pages are loaded synchronously, you can do it simply by mutating a variable, before initing the granim instance.

var $body = $('body');
var defaultStateName = 'default-state';
if ($body.hasClass('page-life')) {
    defaultStateName = 'life-state';
} else if ($body.hasClass('page-other')) {
    defaultStateName = 'other-state';
}

var granimInstance = new Granim({
    defaultStateName: defaultStateName,
   // other options
});

Does it answer your question? You already asked me a question (https://github.com/sarcadass/granim.js/issues/37) but never told me if my answer fixed your problem.