How do they do this? - Need your help...

User 2622524 Photo


Registered User
97 posts

Hi All

Hope someone can help please, I downloaded the Spiritual Release template and would like to know how the text "animation" works when you scroll down to "The Next Steps", see video link below:

https://vimeo.com/340155060

I looked at all the options and settings but cannot see how to do that effect, any advice/help would be appreciated.

The theme can be viewed here:

https://themes.coffeecup.com/responsive … index.html

Thank You :)
User 187934 Photo


Senior Advisor
20,271 posts

They are adding the data-outofview="true" to the elements.
Use Custom and put data-outofview for name and true in for value
Then set a transition looks like they have it set to Ease Duration 1 Delay .5
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 379556 Photo


Registered User
1,602 posts

(a) Eric is right, of course. I'm curious as to why the custom attribute was used on each of the containers with the class of 'step-container'. At first sight, item (b) below seems to achieve the same as the custom attribute, but automatically.

(b) It seems that the next step was to go to the 'In State' section, choose 'Out of View', and in Design > Filters & Blend Modes set the opacity to zero.

(c) In the Regular state, Effects section, a New Transition was set with a Duration 1 second and Delay 1 second.

Can someone perhaps explain the matter that provoked my curiosity at (a) above please?

Thanks.
Frank
User 2699991 Photo


Registered User
5,391 posts

Frank Cook wrote:
(a) Eric is right, of course. I'm curious as to why the custom attribute was used on each of the containers with the class of 'step-container'. At first sight, item (b) below seems to achieve the same as the custom attribute, but automatically.

(b) It seems that the next step was to go to the 'In State' section, choose 'Out of View', and in Design > Filters & Blend Modes set the opacity to zero.

(c) In the Regular state, Effects section, a New Transition was set with a Duration 1 second and Delay 1 second.

Can someone perhaps explain the matter that provoked my curiosity at (a) above please?

Thanks.
Frank


was sort of wondering the same thing
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS


A simple quick way to contact me
https://mawarputih.coffeecup.com/forms/contact-wayan/
User 187934 Photo


Senior Advisor
20,271 posts

Ok I looked at it deeper and not seeing the need for the data-attribute.
I thought maybe that was targeting from a built in of Foundation but I guess not.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2699991 Photo


Registered User
5,391 posts

This is a little bit off topic, but slightly relevant

In microsoft edge, I get the "Out Of Viw transitions reversed (in other words out of view = opacity =0 regular = opacity 1)

but in egge it gets reversed I am sure that with SD v2.5 (maybe even early SDv3) this didn't occur

anyone else experiencing this???
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS


A simple quick way to contact me
https://mawarputih.coffeecup.com/forms/contact-wayan/
User 2622524 Photo


Registered User
97 posts

Eric Rohloff wrote:
They are adding the data-outofview="true" to the elements.
Use Custom and put data-outofview for name and true in for value
Then set a transition looks like they have it set to Ease Duration 1 Delay .5


Thank you Eric, I will give it a bash, at first look I did not see that they added the data-outofview="true" to any of the elements.but I'm most probably missing it or looking at the wrong element.
User 379556 Photo


Registered User
1,602 posts

Wayan Jaya wrote:
In microsoft edge, I get the "Out Of Viw transitions reversed (in other words out of view = opacity =0 regular = opacity 1)
but in egge it gets reversed I am sure that with SD v2.5 (maybe even early SDv3) this didn't occur
anyone else experiencing this???

Yes, Edge does seem to cause a different effect for me also: instead of the containers starting with zero opacity, they scroll into view fully visible, then go to opacity zero, and then return to full visibility.

I have no knowledge of the technicalities involved, and the following are simply speculations based on my observations of what seems to happen.
1. On first going to a web page containing elements with an out-of-view state,
(a) most browsers seem to treat those elements as having been out of view until the page has loaded;
(b) the Edge browser seems to treat those elements as initially in-view and then out-of-view and then back in-view.
2. On first going to a web page,
(a) most browsers seem to load the whole page straight away, so that scrolling is a matter of bringing into view what has already been loaded;
(b)the Edge browser seems to load straight away just the part of the page that is needed to be shown immediately in the browser window, and loads items scrolled to as the scrolling occurs.

The combination of the two items in the preceding paragraph would perhaps explain the effect mentioned in the first paragraph above.

Frank



User 2699991 Photo


Registered User
5,391 posts

Frank Cook wrote:
Wayan Jaya wrote:
In microsoft edge, I get the "Out Of Viw transitions reversed (in other words out of view = opacity =0 regular = opacity 1)
but in egge it gets reversed I am sure that with SD v2.5 (maybe even early SDv3) this didn't occur
anyone else experiencing this???

Yes, Edge does seem to cause a different effect for me also: instead of the containers starting with zero opacity, they scroll into view fully visible, then go to opacity zero, and then return to full visibility.

I have no knowledge of the technicalities involved, and the following are simply speculations based on my observations of what seems to happen.
1. On first going to a web page containing elements with an out-of-view state,
(a) most browsers seem to treat those elements as having been out of view until the page has loaded;
(b) the Edge browser seems to treat those elements as initially in-view and then out-of-view and then back in-view.
2. On first going to a web page,
(a) most browsers seem to load the whole page straight away, so that scrolling is a matter of bringing into view what has already been loaded;
(b)the Edge browser seems to load straight away just the part of the page that is needed to be shown immediately in the browser window, and loads items scrolled to as the scrolling occurs.

The combination of the two items in the preceding paragraph would perhaps explain the effect mentioned in the first paragraph above.

Frank
Hi Frank
That sounds like a good theory
EXCEPT in RSD 2.5 Microsoft Edge behaves exactly how it should do with out of view ~ opacity ~ or any other transition one uses. It's only with SD V3.5 that it is posterior about,, so my conclusion is that it has to be something wrong with the tecky stuff in SDv3.5



Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS


A simple quick way to contact me
https://mawarputih.coffeecup.com/forms/contact-wayan/
User 2699991 Photo


Registered User
5,391 posts

Wayan Jaya wrote:
Frank Cook wrote:
Wayan Jaya wrote:
In microsoft edge, I get the "Out Of Viw transitions reversed (in other words out of view = opacity =0 regular = opacity 1)
but in egge it gets reversed I am sure that with SD v2.5 (maybe even early SDv3) this didn't occur
anyone else experiencing this???

Yes, Edge does seem to cause a different effect for me also: instead of the containers starting with zero opacity, they scroll into view fully visible, then go to opacity zero, and then return to full visibility.

I have no knowledge of the technicalities involved, and the following are simply speculations based on my observations of what seems to happen.
1. On first going to a web page containing elements with an out-of-view state,
(a) most browsers seem to treat those elements as having been out of view until the page has loaded;
(b) the Edge browser seems to treat those elements as initially in-view and then out-of-view and then back in-view.
2. On first going to a web page,
(a) most browsers seem to load the whole page straight away, so that scrolling is a matter of bringing into view what has already been loaded;
(b)the Edge browser seems to load straight away just the part of the page that is needed to be shown immediately in the browser window, and loads items scrolled to as the scrolling occurs.

The combination of the two items in the preceding paragraph would perhaps explain the effect mentioned in the first paragraph above.

Frank
Hi Frank
That sounds like a good theory
EXCEPT in RSD 2.5 Microsoft Edge behaves exactly how it should do with out of view ~ opacity ~ or any other transition one uses. It's only with SD V3.5 that it is posterior about,, so my conclusion is that it has to be something wrong with the tecky stuff in SDv3.5





actually now I'm looking more close, it has something to do with the heights of the containers haven't solved it yet, but getting there I think
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS


A simple quick way to contact me
https://mawarputih.coffeecup.com/forms/contact-wayan/

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.