Create active transitions to elements...

User 379556 Photo


Registered User
1,524 posts

Perhaps the difficulty for a one-time occurrence on scrolling into view is the attempt to use the 'Out of View' state. The source code produced by SD pages suggests that this is achieved by the file outofview.js with which we probably cannot (or should not) meddle.

If one uses instead IntersectionObserver in JavaScript, one can simply turn it off once it has fired (as shown at line 10 of the script in the attached file).

Frank
Attachments:
User 379556 Photo


Registered User
1,524 posts

The attached file is even simpler for once only. The version with my last post was just by adding line 10 to a previous 'non-once-only' experiment with IntersectionObserver.

Frank
Attachments:
User 379556 Photo


Registered User
1,524 posts

It's occurred to me to question whether an 'only once' scrolling transition is ever really necessary. Wouldn't 'only once during the next hour' be just as good? That would make the matter possible with SD's 'Out of View' settings plus a very tiny script.

I did it in the attached example as follows.
1. I set up the transition for the element (class "tr-elmnt") in the usual way in the Regular state.
2. In the 'Out of View' state I made sure there was a Transition, but made no changes to its settings.
3 I added the following script in the Footer Code of the element:

var x = document.querySelector(".tr-elmnt");
x.addEventListener("transitionend", trDelay);
function trDelay() {
x.style.transitionDelay = "3600s";
}

Frank
Attachments:

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.