shape link with animation

[Pete]

Hi

Simple shape, link to another page in the same project is all fine.
Is it possible to click on the link (shape) and animate it (slide off screen) just before the link takes place.


I can add an event Onclick to activate the animation, but that stops the link from working
I can add a second Onclick event to perform the link which actions before the animation, so no animation is seen.
It's like I need a 'delayed' link


I guess I could use Onclick event1 to start a timer for the duration of the animation. On timer action perform the link.
And a second Onclick to trigger the animation with a duration to match the timer above.

Is there an easier way?




TBH - it might be quite irritating in practice(!) - but I'd like to see it in action first! before I decide the 'irritation-factor'



Thanks in advance
Pete

[Pablo]

if you add an 'onclick' event to an object then this will override the default behavior of the click.
also, the browser will not wait for the animation to complete before open the link.

But, using a timer should work.

[crispy68]

Maybe this extension might be helpful: delay link

[Pete]

@Pablo - yes, thank you - a timer for each link option works fine

@crispy68 - doh! - having spent an afternoon adding a timer to each link option, I then saw your post.
Which would have done what I wanted and for $3 would have saved me an afternoon's work .....

thanks for the replies

[Pete]

Hi


Having got a delayed link to work with timers - just spotted an annoyance.

Page 1 - click on button - does a hide with slide left and links to page 2. All good
Page 2 - clicking on home displays page 1 correctly

However, if when on page 2 you use the 'back' button in Mozilla Firefox the button that originally slidded / slid / slud (?) away is hidden until page refresh. On other browsers the page has been refreshed and the original button is displayed correctly. Only does this in Mozilla Firefox


Can I get Mozilla Firefox to refresh properly?

Thank you again
Pete

[Pablo]

I am not sure if you can do something about this, because this is browser specific behavior.
But you can try to disable cache.

Code: Select all

<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />

[BaconFries]

Perhaps this will be of help. Note provided for information only.
https://codepen.io/derekjp/pen/Bguwz

[Pete]

Hi

Disabling the cache didn't seem to help, but the codepen.io link did the trick.

THANK YOU so much
Pete