The problem with css properties is that each one of them must have its own handler/controller which is there to prevent errors. For instance, BackgroundColor prop can be RGBA or HEX, without any unit at the end, transforms are completely different story, opacity as well, etc. Before any property is sent to the GSAP/ScrollTrigger, it has to be 100% correct in order to avoid JS errors on page in general.
Now, you might be one of those people who are CSS skilled but there are many who just ain’t, and my goal was to make Kinekt as bullet-proof as possible thus avoiding countless complaints.
Maybe in the future (if I had enough time) I’ll create some kind of a “switch to pro” mode and allow users to deploy custom CSS properties.
yes, cdnjs does not collect any personal data but as far as I know they are hosted by cloudflare and they do. They are a US Company as well so that’s not ideal. It may be unnecessary but I prefer to host assets locally whenever possible to be on the safe side.
It seems that the plugin is loading slowly.
When animating the header, the header loads slower than usual.
So, when the page is not fully loaded, I scroll, the scroll markers will shift to the position i scroll when the header is fully loaded.
I have created horizontal scrolling sections, which work great on desktop and on mobile devices in landscape mode. In mobile portrait mode, the horizontal scroll is only starting after the last section, and scrolling into white space. Is there a way to disable the animations in portrait mode or on mobile phones?
I have already tried removing the scroll trigger class via inline JS in the header, various ways of dequeueing/enqueueing the plugin based on orientation and device, but even when I succeeded in removing the JS files, the inline styles already generated by the plugin remain.
Is there a working solution for this?
For the future, it would be great to have an option to disable the animation in portrait mode and/or on mobile devices.
Hi,
did you test on the actual mobile device or you just “toggle devices” in Chrome/Firefox/Whatever developer tools?
If the later one is true, you’ll have to refresh the page in order to force re-calculate by Scroll Trigger.
I’m currently working on some updates but I’m quite limited time-wise, and will try to implement disable-per-device option if possible. If you ask me for a time span… it’s hard to predict.
Hi, thanks for the quick reply. Totally understand your time is limited, and you are providing this plugin for free already, which is great.
I was testing on my Android phone, and also via remote debugging on my laptop.
It would be great to have a filter that allows us to enable/disable the loading of the plugin, or its functionality, based on our own conditions. I’m assuming that the plugin currently runs a check on page load to see so if it is toggled on for any Bricks element on the page? If it is, it takes the settings from that element and creates the animation? When I toggle the plugin off, the settings I made for that element earlier are then ignored and not triggering any animations. This seems to confirm my assumptions.
If we could do the same via a filter in functions.php, this could work well for enabling/disabling per device type. If someone would want to enable/disable per device orientation, they could force a page refresh on resize and orientation change. Alternatively, there could be a second filter to enable the on/off check from the first filter not only on page load, but also on resize and orientation change. If that makes sense.
I have pushed an update to 1.1. Please go to Gumroad and download/test the latest version.
Automatic updates via WP Plugins page are available from now on, sorry.
Changelog is to be found at the bottom of the Gumroad description page.
You should be able to disable Kinekt for mobiles via WP dashboard, Settings > Kinekt
(disabling is WP’s function wp_is_mobile() based).
ATM, that’s the best solution I could come up with.
Really appreciate the quick action. Made a small donation.
The solution based on wp_is_mobile was not usable in my case, as I do need it to work on tablets. However, I just solved the issue. I decided to go back to remote debugging on my laptop, to see where the next two scrolling sections were located, while it appeared I was scrolling into white space. They were shown to be below the first section (just never coming into view, possibly because of pinning or pin-spacing). Inspecting the parent section revealed that Bricks was automatically setting flex-wrap to ‘wrap’ on mobile phones. Changing that to ‘nowrap’ made the horizontal scroll work on mobile. Happy that it works now, but feel a bit stupid for not trying this earlier
Anyway, the option to disable the animations on mobile devices will probably help someone in the future.
I wonder if anyone a bit more advanced in this topic knows if this effect of the hero of this page is achievable with kinect without much coding. It’s basically an only scroll triggered animation without the page being scrolled for the hero until the animation is finalised.
Weeelllll, that’s a good point! TBH, I have never been able to figure that out, even if two elements share the type, settings are not copied over. So, at the moment, the only thing you can do is to duplicate the target/animated element. I know it’s kinda lame but I have no other solution.
Hi, maybe someone can help me out here. Is there a way to prevent SplitType from splitting two words? In gsap SplitText you can just add and those words will be treated as one. I need this to apply styling to those two words and have them not break.
Any help appreciated.
@ooohboi - huge compliment btw. In the last few weeks I’ve tried multiple plugins with gsap integration and kinekt is by far the most stable. I’d still prefer to have scripts included in the plugin with no cdn calls.
edit
well now it happened - got a call with a customer to check the progress of his page and unpkg is not working. Now every element that is animated with gsap just disappears on animation start.
