Try to animate a opening hours panel that has to slide in from right lo left on click of a button (outside the animated element) and slide back by clicking a icon on the animated element.
How do I set the triggers? Because all I see now is the possibility to trigger the animated element on click and when I go to Custom event I can put in a other element, but I don’t see the trigger.
Hi David, @AllMediaLab
Not positive I fully get your question - nice animation by the way!
So with Interactions you would set your entrance animation with the clock as a trigger and the floating schedule as a target. You can just select the opening hours by clicking on the target and selecting it on the page, or edit the selector. This last one is easiest using an id I found, so something like $#uniqueId. You can then select a premade animation like “slideInRight”.
If there was not a second trigger then you could alternate the animation. Instead, I think the easiest way to be able to have two triggers is to add a second animation and a class indicator. So open the Edit Animation panel and add another transition with a type of “set” then for the property select class → add class. Select whatever you want for the class name - I’ll use “hoursopen”. Then in the advanced options for trigger condition select “doesn’t have class” and add the class name as a value.
Now make a second interaction on the button click. Use the same target. Add your animation, for example “slideOutRight”. Then under advanced options select the trigger condition “has class” and add in the class name you picked. Then open the Edit Animation panel and add the remove class property.
Finally, add an Interaction to the close element. Trigger on click of the element, but target the whole schedule block - again I would use an id, but you can click on the target to select it on the page. For animation select the same animation you used on the button from the named animations list.
That should be it. Let me know if it works/is what you were having the problem with,
Bob
No the problem is not solved, my demo was not with Interactions, I made a simple setup with Interactions and concentrate first on the first trigger to open the panel from right to left.
Problems:
Hide at Start doesn’t function so the panel is visible instead of not visible. (only works on click now)
When clicking on Click button Starter Template for Bootstrap#menu-toggle appears in the
browser, I rather have that not visible.
I notice a horizontal scroll bar when the animation plays!
Ok on this example I can see the issue but the first link you shared Sjef Diederen Margaten has the same implementation without any issue. That is also your work isn’t it?
HI @AllMediaLab,
Did you try my suggestions above? It doesn’t look like your Interactions match up. Also, instead of an anchor link, use a button as the trigger. That way you won’t get the change in the menu bar.
Cheers,
Bob
@RobM here has already given you detailed step but your project got us confusing because you might have removed the script that you shouldn’t.
First off, you’ve set Hide At Start on the link not on the sliding block (#hours-open-wrap) but the main issue is that you’ve removed the script from the head section of the HTML. I’m talking about the scripts that PGIA places which make the PGIA work properly.
So in short you should apply Hide At Start to your sliding element not on the Link
And on the link trigger interaction, go to Advance Options and enable Prevent default action, so that #menu-toggle won’t appear on the browser address bar
And horizontal scroll is appearing because your element is going out of the view of browser. Applying position fixed would be best option here but if you don’t want that then you should apply overflow: hidden to the parent of that slider block.
@abirana
Yes I will do that, but can I just set Hide At Start on a element without Interaction? I wanted to add a Interaction with auto opacity to #hours-open-wrap but without a trigger that doesn’t work. That’s why I ask How do I hide #hours-open-wrap what is the trigger because I can not click that same element.
For an interaction there are two things, one trigger and another target. In your case trigger is the link where you click and target where the animation happens.
So you apply interaction on the trigger, you’ve build your interaction to reveal the target (sliding block). But now you need it to be hidden when the page loads.
So if you want to hide an element, what would you do? Apply some CSS to hide the element or apply Hide At Start, so wherever you apply these properties that element will hide. So in your case you’ll have to hide your sliding element, so that you can reveal it with interaction.
By the way, have you tried and tested my suggestions?
While pasting I asked you to only copy the elements inside the body. And after you do that please check if it is there. If it is not there then something should be missing on what you did.
Anyway let if be, why don’t you just copy paste the below code on your existing page. Place is at end of the head.
