Hi Webflowers,
I’m currently experimenting the new GSAP Timeline IX3 and trying to create a loading animation for my project. I just noticed that if I use the page load interaction, it applies to all pages which kind of create some problems. Would it be possible to apply page load animation only to homepage?
Hello @zweimillimeter,
the reason your loading animation is applying to all your pages is maybe because your animations is targeting classes that exist in all your pages. To avoid that use unique id, attributes, or combo classes from the interaction options
Well the problem element is the navigation which is a component so if I target it with ID, Class or Attribute it won’t really solve the problem, will it? I don’t think this is a very healthy solution.
So you have a navbar component that you don’t want to animate in every page? So I think you will need to created another component from the same navbar but without the animation trigger. I hope this helps.
@zweimillimeter did you manage to figure out a more sustainable solution?
I’m in the same situation - navbar that should animate one way on home page but not on others. Best to manage one navbar component across the website of course, so trying to avoid duplicate. Thanks!
A single component can have a variant applied to it:
Hello @Audrey_AceStudio and @zweimillimeter , like @Port_of_Folio mentioned you can have variants on your navbar component and use those variants as attributes to animate on load depending on the variant you are using here is a quick Loom on how to do it Applying Loading Animations to Your Navbar Variants | Loom let me know if you have any questions. I hope this helps.
