Swapping Image and Text Around

Welcome back, Julien! Could I get a reply to the above, please?

Hi controlb,
You shoud better try to change the CSS animations to do that.
See styles.css.
Y can see 2 types of animations:

• ‘toLeftAnimX’ or ‘toRightAnimX’: animations for content leaving the page
• ‘fromLeftAnimX’ or ‘fromRightAnimX’: animations for content entering the page

They consist of values at the beginning (0%) of the animation and values at the end of the animations (100%): opacity and position

Just try to invert these values and let me know if it works better.

Inverting the values doesn’t seem to alter the initial positions of the text and the images before or after the animation begins. Could a left/right option be put in the admin?

Hi controlb,
and thanks a lot for your contribution to this support thread, that’s very helpful!!!

As I’ve already said on my bebsite, almost everything is possible with CSS but the problem here is you’ll have to change also all the animations.

As soon as an animation begins, even if you’ve moved the images and texts in the slides, their positions are re-evaluated and that’s the reason why you see this reverted effect… So basically, I think you have to re-think the CSS entirely.

A solution would be to let the user choose between two CSS stylesheets but I’ve decided to keep things simple in the admin panel because everyone will have specific display needs and it’s impossible to manage all the CSS properties dynamically.

I know this plugin can be improved and I’ve a lot of things in my TODO list but unfortunately I don’ have much time to develop them.

If someday you write this alternate CSS stylesheet, feel free to share it with me and I could add it to the plugin ??

Regards ??

Finally worked it out!

I swapped all instances of the da-img animation number (e.g. ‘4’ in ‘fromRightAnim4’) for the h2 and p ones. (I don’t use .da-link so that doesn’t feature in the solution.)

So for example, this:

.da-slide-fromright h2{
	-webkit-animation: fromRightAnim1 0.6s ease-in 0.8s both; ...

.da-slide-fromright p{
	-webkit-animation: fromRightAnim2 0.6s ease-in 0.8s both; ...

.da-slide-fromright .da-img{
	-webkit-animation: fromRightAnim4 0.6s ease-in 0.8s both; ...

becomes this:

.da-slide-fromright h2{
	-webkit-animation: fromRightAnim4 0.6s ease-in 0.8s both; ...

.da-slide-fromright p{
	-webkit-animation: fromRightAnim4 0.6s ease-in 0.8s both; ...

.da-slide-fromright .da-img{
	-webkit-animation: fromRightAnim1 0.6s ease-in 0.8s both; ...

I also changed all the 60% values to 40%, but that was pretty much it.

I’ve posted the full CSS up at https://shorttext.com/QJ52sSlsoCFXnoA for you to check out. Notice I tagged up all the original values too – I took a bunch of wrong turns before I got there.

Great work ??
I’ll test that and maybe add it to the plugin.

Hi controlb,

Thanks a lot man, i was worried about this image and text swapping for the slider and you just saved my day.

Thank you sooooo much.

Chand.