Create active transitions to elements...

User 2699991 Photo


Registered User
3,700 posts
Online Now

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

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


Registered User
3,700 posts
Online Now

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


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


Registered User
52 posts

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.


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

Blissfully Ignorant In Jacksonville, Florida
When all else fails read the instructions.
www.website-design-jacksonville.com
RSD 5.0 what a pleasant surprise. Fantastic!
User 2826919 Photo


Registered User
52 posts

Ed Dean wrote:
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.


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



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?
Blissfully Ignorant In Jacksonville, Florida
When all else fails read the instructions.
www.website-design-jacksonville.com
RSD 5.0 what a pleasant surprise. Fantastic!
User 2699991 Photo


Registered User
3,700 posts
Online Now

Ed Dean wrote:
Ed Dean wrote:
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.


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



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.


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


Senior Advisor
13,727 posts

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.
Ha en riktig god dag!
Inger, Norway
This site was made before we were able to create components through the app:
Component sharing for RFF, RBB, RSD and SD: https://eikweb.com/sharing/
My work in progress right now:
Components for the same as above + HTML Editor: https://mock-up.coffeecup.com


User 2699991 Photo


Registered User
3,700 posts
Online Now

Inger wrote:
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

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


Senior Advisor
13,727 posts

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.
Ha en riktig god dag!
Inger, Norway
This site was made before we were able to create components through the app:
Component sharing for RFF, RBB, RSD and SD: https://eikweb.com/sharing/
My work in progress right now:
Components for the same as above + HTML Editor: https://mock-up.coffeecup.com


User 2699991 Photo


Registered User
3,700 posts
Online Now

Inger wrote:
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

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


Registered User
3,700 posts
Online Now

Wayan Jaya wrote:
Inger wrote:
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.

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.