It would be super awesome (and necessary) if we could get a native plugin for the full GSAP animation library. So we would be able to choose the greensock plugins we want (Scrolltrigger, Scrollsmoother, splittext, etc) and then we can install it on Divhunt.
This makes pretty much every animation natively possible in Divhunt.
Hi,
We understand need for advanced animations and we will do something about it for sure in near future, we have plans to create something like this.
And most likely that system will work by utilizing GSAP library.
That would be awesome! Indeed having a visual timeline like motion.page offers including for ScrollTrigger is a game-changer!
Also I think it’s a smart decision to fully utilizing GSAP for this, as this is the industry standard and I think by far the best for animations/interactions.
Glad to hear this is something you guys are planning on implementing!
Hey @corneromme ,
I could not agree more with you about GSAP, but until we get native integration here is how you can implement the GSAP library through custom code:
Add an embed element at the end of your page, I set the name to “JS” just for clarity
Open the embed and add CDN for the GSAP library.
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/ScrollTrigger.min.js"></script>
Click on Files and add a new file, I will call it “GSAP”
Now to run this code you will have to set the trigger: Right Click on the file > Events > onPageReady
Open the file and this is where you will put all of your GSAP code, if you are not familiar with GSAP I suggest you want a few videos on youtube and I’m sure you will get along. Enjoy!
I was already trying something like that indeed 
Thank you so much!
@Dusan when I put an embed to the end of the page, will it show up on all of my pages? When I import GSAP I want it to be available on the whole site.
Hey @corneromme, if you add an embed element, all the code inside will be applied only on that specific page. If you want to add a global custom code (to be applied on all the pages), you can navigate to Settings > Custom Code
You can choose where to write your code: Head start/end, or Body Start/End.
I hope this helps, please let us know if you need any help!
I see, that’s great. Thank you!
Hi @corneromme
I need to add something on top of this.
Since this is SPA, if you are using embeds, code will run when you access that page, but it will stay running all the time while you are browsing through website, thats not the problem, problem is if user visits that same page again, it will trigger code to run again. And it might cause some issues sometimes.
Some little hack you can use is something like this one.
In this example I have function that is global defined somewhere else called matter_pricing.
So I will run this function only if my #canvas-matter exists, and it is not already loaded, I have variable matter_loaded in my HEAD custom code defined, and it is set to false as default.
And first time when this functions runs, I will swtich my global variable matter_loaded to true, and this will never load again if you visit same page multiple times in one browsing.
This is something that we will take care of in future by giving you an option to load specific code only on specific pages without need to use embeds, just our files system.
I understand @Pakic. Is it possible to add this on the wishlist to integrate this so we can just add JS libraries and scripts to a website and in the background Divhunt makes sure that it’s only loaded once per page?
Feel free to add it on wishlist Anyway, thats in the plan already and we will take care of that, hopefully soon
Hi,
We created a plugin for GSAP that you can use for advanced animations now:
It’s not fully advanced, but it covers a lot of use-cases for now, until we create native animation system in future that will support much more options.
