Create active transitions to elements...

User 2699991 Photo


Registered User
3,700 posts
Online Now

Wayan Jaya wrote:
Wayan Jaya wrote:
[quote=Inger]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


UPDATE2
scratch the previous update
Although I got it to work to a fashion, it is so much work & fraught with possible errors and a significant loss of loading speed I don't think it's worth doing.

The problem with using the class "outofview" and trying to add the 'animation-iteration-count" thingy
is that the actual "outofview" is controlled by some JS which is built within Site Designer foundation framework, what that does put simply is it looks at any element with the class "outofview" calculates it's position if its out of view, it adds the class "out of view" if it comes into view, it removes the class "out of view"
So the "animation-iteration-count" thingy fires off no problem for the first time, but because the class name gets added if the user scrolls again up or down, then the class name gets removed and added again, resulting in the animation-iteration-count thingy, actually losing count and thinks it's got to start again.

I have been fiddling with this since very early this morning, and have just come up against brick walls.

If someone out there is a guru with JS, then it might be possible to make the adding/removal of a class name (with the same actions as the JS for "outofview" but make it so it only happens once, that way it may be possible to do what Ed wishes to do, (and me for that matter)
until then
ED I'm sorry I cant come up with anything workable from within Site Designer unless it's using custom CSS and custom JS I await with eager anticipation in-case someone comes up with something less intensive

The Help You Need: When You Need It The Most
Website Design & Development
Website Renovations
Wayans' Theme Park
Watch Listen & Learn Video Tutorials
User 244626 Photo


Registered User
809 posts

You could use a simple plugin called Scrolla if you want to use animate.css (I would use version 3 which is a option in the settings when initializing the plugin)

https://maximzhurkin.github.io/jquery-scrolla/

I did a small modification to only have the animations happen when scrolling down....not back up.

I added in the option of using the data-once="true" if you prefer the animation to only happen once and not repeat.

I removed the offset setting also.
Attachments:
Bootstrap 5 CSS Grid.
User 2699991 Photo


Registered User
3,700 posts
Online Now

Twinstream wrote:
You could use a simple plugin called Scrolla if you want to use animate.css (I would use version 3 which is a option in the settings when initializing the plugin)

https://maximzhurkin.github.io/jquery-scrolla/

I did a small modification to only have the animations happen when scrolling down....not back up.

I added in the option of using the data-once="true" if you prefer the animation to only happen once and not repeat.

I removed the offset setting also.


Thats great Twinstrean except Ed is using "outofview" from site designer itself,,
but what you have is really cool too

The Help You Need: When You Need It The Most
Website Design & Development
Website Renovations
Wayans' Theme Park
Watch Listen & Learn Video Tutorials

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.