Menu icon Foundation
Orbit Caption Effects

I'm trying to do something fancy with Orbit captions, using CSS3 to allow them to fly in from below. I can get this to work using transitions, but it only applies to the first slide, as by the time the next one comes around the transitions are finished.

The client wants it to work like the slider in this example: http://www.sgurrenergy.com , but as I've already used Orbit to build the site, I'm loath to change things.

Does anyone have any suggestions, or should I just 'discourage' the feature?

Thanks!

Orbitcaptionstransitions

I'm trying to do something fancy with Orbit captions, using CSS3 to allow them to fly in from below. I can get this to work using transitions, but it only applies to the first slide, as by the time the next one comes around the transitions are finished.

The client wants it to work like the slider in this example: http://www.sgurrenergy.com , but as I've already used Orbit to build the site, I'm loath to change things.

Does anyone have any suggestions, or should I just 'discourage' the feature?

Thanks!


Jin Liu gave the most helpful answer for this post
Jin Liu almost 6 years ago

You should enable the transition animation when li is active.

li.active { transition code here...}

Jin Liu almost 6 years ago

You should enable the transition animation when li is active.

li.active { transition code here...}

Paul Brickles almost 6 years ago

Thanks Jin, that's awesome.