Hi, I am creating an interaction that:
- Slides visible list content (image blocks with titles) to the left and offstage to reveal page content underneath (regular text)
- At the same time sliding a link that is offstage to the right (light brown bar with white arrow) which can be clicked to revert to the original state with the “list” content above the page content
I have two different formats, one for landscape and one for devices.
The desktop version has a large image placed over the text content and the interactions to move this to the left and reveal the content underneath seems to work fine.
The interaction for the device version though is glitchy and needs 2 clicks to make it work. Often the first click either has no effect or the image slides over half the distance and sticks, then on a second click goes the full way.
In order to achieve the different interactions for desktop or device I have a clickable div for one interaction that is only visible for the desktop version and another that is visible on devices.
The clickable div for the devices is a link div and in order to trigger the interaction and also take the user to a different page. It seems to the change to another page that is causing the glitchy behaviour.
If you click the bird image and then the white arrow to return, then repeat several times, it all seems smooth and fine. However when you click the “Royal Court at Killaloe” which triggers the interaction and takes the user to a new page the action is glitchy.
From that page if you click the bird again, it is glitchy as you are being taken back to the home page, changing pages.
Any suggestions would be very welcome!
Go to the home page and select the tablet view
Click the bird image or click the “Royal Court at Killaloe” block to see the interaction
Click the arrow on the left hand side light brown box to go back to the list
If you click each one a number of times taking you from page to page you will see the glitchy behaviour. Also when I output the HTML the interaction does not seem to work at all.
Note: Only the bird image and the “Royal Court” block are linked, the other blocks are not so if you click one you will probably need to reload the page to get the links back.
After clicking either the bird image or the “Royal Court at Killaloe”:
Thanks for any help.