Page 1 of 1

*SOLVED* Make "Fade In Left" effect happen in viewport *SOLVED*

Posted: Tue Jan 21, 2020 3:51 pm
by etcbbu
If you go here:

https://www.ktravisj.com/index.php

Notice that I have those white, circular "1", "2", "3; icons toward the bottom of the page have the "Fade In Left" Animation set on them. I have the iteration set on "1".

But it tends to happen before the user scrolls to the bottom of the page to see it happen.

How can I cause them to fade in only when user scrolls to them in the viewport?

--etcbbu

Re: Make "Fade In Left" effect happen in viewport

Posted: Tue Jan 21, 2020 4:45 pm
by Pablo
You can use 'onscollreveal' events to trigger the animation when it comes into view.

For example:
http://wysiwygwebbuilder.com/bookmark_events.html

Re: Make "Fade In Left" effect happen in viewport

Posted: Wed Jan 22, 2020 8:03 pm
by etcbbu
Are these the correct settings:

https://www.ktravisj.com/screen1.png

?

--etcbbu

Re: Make "Fade In Left" effect happen in viewport

Posted: Wed Jan 22, 2020 9:15 pm
by Pablo
Did you try?

Note that there are many templates that demonstrate how to do this:
http://wysiwygwebbuilder.com/templates8.html

Re: Make "Fade In Left" effect happen in viewport

Posted: Thu Jan 23, 2020 12:51 pm
by etcbbu
I'll look at the Templates, too, but yeah, these are the settings I applied on all three of the little "1", "2", "3" images toward the bottom of my homepage

https://www.ktravisj.com/index.php

But they're not seeming to do it when I scroll down to them.
If I scroll to where they are on-page, and I "Refresh/Reload", then yeah, they all swoop in. But. Not when anyone just scrolls down to them, regularly. They're just sort of already at their "final-spot" when you just try to scroll down and view it regularly. Like it already has happened on pageload.

--etcbbu

Re: Make "Fade In Left" effect happen in viewport

Posted: Thu Jan 23, 2020 1:49 pm
by Pablo
Did you use onscrollreveal?

Re: Make "Fade In Left" effect happen in viewport

Posted: Thu Jan 23, 2020 2:00 pm
by etcbbu
Yeah, here's a screenshot of the live settings I've got set on this image:

https://www.ktravisj.com/screen2.png

Now, I have it set to "Not Visible", by default. I was assuming I need to have it off, by default, for this to work correctly. Is that wrong? Does it need to be set to visible?

--etcbbu

Re: Make "Fade In Left" effect happen in viewport

Posted: Thu Jan 23, 2020 2:18 pm
by Pablo
It looks correct.

Does my demo work for you?
http://wysiwygwebbuilder.com/bookmark_events.html

Re: Make "Fade In Left" effect happen in viewport

Posted: Thu Jan 23, 2020 4:24 pm
by etcbbu
When I hit that link for your demos (all of the little squares that animate in different ways) , those look great for me, yeah.

I dunno--my little "1", "2", "3" images at the bottom of the https://www.ktravisj.com/index.php just seem to all be 100% loaded by the time I scroll down to them, and they don't "fade in" , or "onscrollreveal" at all..?

Re: Make "Fade In Left" effect happen in viewport

Posted: Thu Jan 23, 2020 4:43 pm
by Pablo
Sorry, but I cannot see what you have done based the published page.
If you want my help then please share a demo project.

Note that I do not need your complete project. Just keep it simple so it's immediately clear what you have done.

Related FAQ:
https://www.wysiwygwebbuilder.com/forum ... 10&t=82134

Re: Make "Fade In Left" effect happen in viewport

Posted: Fri Jan 24, 2020 11:43 pm
by etcbbu
[EDIT: URL removed]

I removed a bunch of crap so that when you open the trav.WBS file, it will be on the

/index

page in the project. And please look at the three files

Code: Select all

travisjconsultingindexImage14
travisjconsultingindexImage15
travisjconsultingindexImage16
Thank you.

Can you please let ms know when you see it so that I can delete project from my web-space?

--etcbbu

Re: Make "Fade In Left" effect happen in viewport

Posted: Sat Jan 25, 2020 8:31 am
by Pablo
You will need to uncheck 'Include visibility' for all objects which are controlled by events.

See this related FAQ "When using events, the visibility is affected by breakpoints."
https://www.wysiwygwebbuilder.com/forum ... 10&t=63817

Re: Make "Fade In Left" effect happen in viewport

Posted: Mon Jan 27, 2020 5:55 pm
by etcbbu
I don't know what's going on, man. *NOW*, even after I've "Hidden" each of the three icon images, by default, on every breakpoint; and made sure the "onscrollreveal", "Show with effect", "show right", and "linear" are all of my settings for the effect on each of these three icon images, they are still only loading on pageload, and any time I scroll down to them, they're just already loaded 100%. They don't slide in onscrollreveal , at all. They're just already in there and loaded and static by the time I scroll down to them.

Again, it's the "1", "2", "3" image icons toward the bottom of the page at https://www.ktravisj.com .

--etcbbu

Re: Make "Fade In Left" effect happen in viewport

Posted: Mon Jan 27, 2020 6:08 pm
by Pablo
Did you follow my advise?

Re: Make "Fade In Left" effect happen in viewport

Posted: Mon Jan 27, 2020 7:14 pm
by etcbbu
Pablo,

Crap--I am sorry. I forgot there is difference between the

Right click on object >> uncheck "Include Visibility"

thing, and the actually hiding/unhiding of an object. Those are two separate things. Yes, I have done that now. Thank you.