here is a little demo video with examples of both Out Of View state & those animations from the site as linked by Ed

https://youtu.be/y-m7dC7fx-Y

here is a second demo showing a bit clearer how the animation starts before out of view comes in
https://youtu.be/tKys0ZqC3ws

Most helpful, thank you. I still have a lot to figure out however I reckon playing with the effects and settings will be the way to go. I successfully created an effect that is viable.

I thank you again I have figured out so much from your help. The one thing I haven't figured out is how to get things to run once per load or reload. Any pointers?

Well that is a little bit tricky
are you using the "in-state = out-of-view to create your transitions or still using that third party thingy?

It is possible to make the transition (or whatever you want to call it, ) but it is going to need some custom CSS code applying, which probably means writing your own CSS code for the actual transition, (which sort of defeats the object of being able to use the "Out Of view thingy.
I have never tried such things, but I will have a play around to see if something can be done, and will get back to you if possible or not unless someone else chips in with a solution before that.

Here is something: https://www.w3schools.com/cssref/tryit. … tion-count
But I guess it depends on what kind of animation.

I have also used the iteration count on a slideshow, see my sharing page (URL in my signature), click on 'Galleries' and look for Crossfade slideshow.

Unfortunately "iteration count" doesn't seem to work if he has used "out of view"

There is some custom code that uses 1 line of JS and then some custom CSS,
2 problems
1/ It requires a knowledge of CSS code (out of view doesn't count anymore,)
2/ if you have a number of different animations on a page then iy's going to be better to place a file in resources with the animations, then point to that file from the header on the pages.

I am still testing & fiddling maybe I can come up with a better solution as the day goes on

Ed should let us have a look at his site, so that we can see what kind of animations he has placed there. Then we wouldn't have to make half-qualified guesses.

Doesn't matter what the animation is if he is using "outofview" there is no way at the moment that I can get it to work using the "animation-iteration-count" thingy

If I can get that css "animation-iteration-count" to work on "outofview" then that doesn't matter what transitions/animations he is using.

I can get it to work beautifully using Custom CSS

It maybe that with a little bit of JS code, that would work too but I am nowhere near good enough with JS

it needs something that will take the ID of the container
look to see what position it is on the page (i.e in view)
then add the CSS or remove it depending on the container (or element) position

I have done some JS code that loads an element on page load just the once, but that doesn't stop the animation from repeating I am trying to see if I can tweek it

UPDATE
I got it to work within Site Designer
WITHOUT USING the "outofview" thingy OR JS

however, it does require 2different class names for each element (unless they have the same transitions)some custom code for each class you want to have the transition apply, which means probably making a CSS folder in the resources, with all the custom codes inside & them pointing to that folder in the FOOTER of your page header.

It's going to take quite a bit of work, & will probably need a couple or three How-To videos to show what to do.