Created a shop opening hour app with Interactions that slides out of the websites right side after clicking on the green clock icon in the top header of the web page. On Mac Big Sur & Monterey and Window 10 & 11 and on Android 12 and IOS 15.2 I see some issues.
Windows & Mac Android IOS all bowsers: App appears before animation on pageload in a sec and then disappears and it should only appear on click. Hide at start doesn’t work propper maybe!? Panel disappears after animation.
Android: The animation opens smoothly and normal, but closes in slow-motion.
IOS: The animation opens smoothly and normal, but most of the time disappears after appearing it in a sec.
The weird thing is in Pinegrow it all worked perfect, but as soon as I migrated it to a real website the issues start.
Obviously there is something wrong with the way I created Hide On Start can you please elaborate how to do that is this situation?
Just one question: How do you set the Hide On Start? Can you show me all the steps please. I mean I know how to add auto opacity , but do you need to set a duration? Or how do you set it till the animation starts? I my animation I used the normal opacity.
The documentation lacks a simpel clear explanation about the subject!
Hi @AllMediaLab,
You just have to select the element and then “Hide at start” from the Interactions panel. This will add two inline styling elements, visibility: hidden; and opacity: 0; if JavaScript and Pinegrow Interactions are enabled. You only have to change the opacity to reveal the element.
Hope that helps,
Bob
Thanks for the clear explanation and all the help and @abirana Abi too of course! I think you should add this to the documentation instead of the long winded text there is now that is a bit confusing.
Solved all problems and found again that there is a serious issue with Pinegrow and Sublime Text and save or save all (code disappears on save or doesn’t save in Sublime). I wish there was a sync plugin like in VS code. I have it with normal websites as well without Interaction. Even send a huge project some time ago to @Emmanuel to check it out but it was said to be due to the complicated PHP structure I used for that particular project with lots of includes.
Now with plain HTML projects I have exactly the same problem: </body> and </html> closing tags disappear or the <!DOCTYPE html>
In this case the Interaction code that supposed to be in the head disappeared on save in both Sublime and Pinegrow. I mean saving in one of the 2.
I have to shut off HTML and CSS formatting in Pinegrow anyway to prevent other problems on save. At the time of the project I send in the HTML email code in the website was also effected by Pinegrow. That makes you think twice to just start editing in Pinegrow along with Sublime Text.
I only use Pinegrow now as a quick way to set up a project and create a animation in it, then I copy/paste the results to my build system website like with this animation.
Only question left is: What do you think about the way I initialize the open hours script at the bottom of the page by wrapping it in a function? I had to add the function to both open and close triggers, because otherwise I had to click 2 times to activate the script. Now when you click the green clock in the header the panel slides out and starts the open hours script. when you close the panel it resets the script.
Is there a better way to do this? What do you think?
Hi @AllMediaLab David,
I missed a bug report about problems with Sublime Text - I’ll take a look and see if I experience the same problems. I’m guessing it is because one or the other has a cache that isn’t being updated since there is no plugin connecting the two like with Atom or VCS. What version of Sublime Text are you using? My guess is that the two would cooperate if only one had a particular document open at a time - although this does defeat the purpose.
EDIT: I fooled around a little with Sublime Text 2 - It is odd. With a document open in both I will sometimes get an update on the Sublime side when I update in Pinegrow, but not always. It never seems to update on the Pinegrow side. I know in old documentation it says that you can use any IDE, but I think both Pinegrow and the various IDEs have evolved a bit since. I guess the only ones I would trust are Atom and VCS. I know it is hard to switch once you are dialed into a certain one. Sorry.
At first I was going to suggest to add the initialization of the opening hours in a function that fires on DOM load. However, I suppose that could give an incorrect schedule if the person left the site open overnight. I do think that the script slightly delays the opening animation. I don’t think you need a second onclick on the close button. Just the initial one on the opening clock. The only other way you could do this is to maybe wrap the script in an update so that it runs on page load and then every 3 hours or so.
Exactly what is happening and can you imagine when Interaction spits out JavaScript inline code (that is not easy to fast read and notice any errors or differences) on a page etc. etc.
Yes the bugs happened during a dialogue with @abirana Abi in a other post.
I use the latest Sublime Text (that works also without a license), but the principle will be the same. I suspect some Node.js interaction between the 2 apps ( don’t know how to test or target that anyway).
And yes I use Sublime Text since the start of it (there is no version number any more only the release number) with a yearly business subscription to support the developers and have many paid/sponsored extensions, so to change to VS code is a huge step. I have VS code as well with the same plugins installed (even some paid once as well) for in case of emergency that there is a issue with Sublime.
What surprises me is that there is a sync extension for Atom (that hardly anyone uses), but not for Sublime text according to this article Atom has only 1 million user, but Sublime Text 17 million. Sublime Text is one of the most widely used editors after VS code:
Next time I will try it with VS code to see if that makes any difference.
The weird thing is that if I only use one trigger (the green clock) I have to click twice to init the script so I reset the script on slide out. That way any time you click the clock the real time, day and hour is checked to spit out the proper text like “We are open” etc. On load it can be already closed or open when the page is open for some time. Think I leave it like this it works on all OSes and devices.
Sorted everything out this morning. Had to modify the Ajax call a bit and added the hidden element to it! The Pinegrow script that automatically appears in the head was put by me in a external script and added to the Alwayshints part of Ajaxify.
All working better now, but I need some advice for the position of the animated panel. Now I made it fixed, but the problem I have is that despite the fact that the element is hidden it covers of course the space of the width of the panel.
This is causing all kinds of problems for example on mobile phone covering the whole space.
Tried a relative element with a absolute element in it, but experience the same problem.
Need some advice about placing a hidden to be animated element without covering any space.
@AllMediaLab Hey David,
I see what you mean - it blocks the arrows, correct? Can’t you have it be moved off screen with a transform plus have it hidden and then moved back onto screen with the animation? That way it wouldn’t block page clicks.
Cheers,
Bob
Thanks for the tip! But what I try to understand is if the element has a position fixed and a X -120% (just a example) will push it the body or other elements aside or not ? Should it be absolute?
@AllMediaLab
Hi David,
So both fixed and absolute remove an element from the flow. They shouldn’t impact the positioning of any elements on the page. So, they shouldn’t “push” any other element on the page. The difference between fixed and absolute is where the positioning is relative too. For an element with position: fixed the positioning will be relative to the viewport. This mean that even if you scroll, the position of the element will remain the same. In contrast, position: absolute will position the element relative to the closest positioned ancestor. Many times this will be the body element. This means the element will maintain the original position with page scroll. The important bit here is that neither will impact other elements in the document. However, remember that the positioning will impact the calculated viewport size. That means that you can cause scrollbars to appear unless you take steps to prevent this.
Based on your design, I think that pre-animation, the opening hours should be positioned absolute where you want it to appear after the opening animation plays - so center of the screen. Then transform it off-screen. Use hide at start to set the visibility to hidden and opacity to 0. Be careful about wrappers that aren’t moved as they will block user access to elements that are behind them. The opening animation will change the visibility, change the opacity, and transform it to the middle of the screen. The closing animation should reverse all of these steps.
@RobM Hi Bob,
Thanks for the clear explanation. Yes I know all positions, but have not much experience with animations like this.
As you can see I use a container now, do you advice to animate the hours-open-wrap like I did, but then let it start not visible and with a negative X?
Yeah, I think that would be the best way to approach it, but I’m worried about your container. Won’t that block your on-screen interactions that are below it?
I got rid of the container, made the wrapper position: absolute; and right:0; Then I animated the wrapper out of sight at start. Working perfect now without any content covered by the open hours panel.
Cool!!!
Thanks a lot!!!
Still have the problem that the panel pushes the body to the left on the mobile phone. To see the issue scroll a bit down and swipe to the left. Under or above the slider you see the error.
What can I do to prevent this from happening?
UPDATE: Fixed it with position fixed instead of absolute!
