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

All WYSIWYG Web Builder support issues that are not covered in the forums below.
Forum rules
PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901

MUST READ:
http://www.wysiwygwebbuilder.com/getting_started.html
WYSIWYG Web Builder FAQ
Post Reply
User avatar
etcbbu
 
 
Posts: 502
Joined: Mon Apr 23, 2007 3:00 pm

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

Post by etcbbu » Tue Jan 21, 2020 3:51 pm

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
Last edited by etcbbu on Mon Jan 27, 2020 7:23 pm, edited 2 times in total.
www.ktravisj.com

Travis J Consulting, LLC -
Website Design/Development/Maintenance, Web-Marketing/Social Media/Social Networking, SEO/Search Engine Optimization

www.ktravisj.com

User avatar
Pablo
 
Posts: 18986
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

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

Post by Pablo » Tue Jan 21, 2020 4:45 pm

You can use 'onscollreveal' events to trigger the animation when it comes into view.

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

User avatar
etcbbu
 
 
Posts: 502
Joined: Mon Apr 23, 2007 3:00 pm

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

Post by etcbbu » Wed Jan 22, 2020 8:03 pm

Are these the correct settings:

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

?

--etcbbu
www.ktravisj.com

Travis J Consulting, LLC -
Website Design/Development/Maintenance, Web-Marketing/Social Media/Social Networking, SEO/Search Engine Optimization

www.ktravisj.com

User avatar
Pablo
 
Posts: 18986
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

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

Post by Pablo » Wed Jan 22, 2020 9:15 pm

Did you try?

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

User avatar
etcbbu
 
 
Posts: 502
Joined: Mon Apr 23, 2007 3:00 pm

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

Post by etcbbu » Thu Jan 23, 2020 12:51 pm

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
www.ktravisj.com

Travis J Consulting, LLC -
Website Design/Development/Maintenance, Web-Marketing/Social Media/Social Networking, SEO/Search Engine Optimization

www.ktravisj.com

User avatar
Pablo
 
Posts: 18986
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

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

Post by Pablo » Thu Jan 23, 2020 1:49 pm

Did you use onscrollreveal?

User avatar
etcbbu
 
 
Posts: 502
Joined: Mon Apr 23, 2007 3:00 pm

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

Post by etcbbu » Thu Jan 23, 2020 2:00 pm

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
www.ktravisj.com

Travis J Consulting, LLC -
Website Design/Development/Maintenance, Web-Marketing/Social Media/Social Networking, SEO/Search Engine Optimization

www.ktravisj.com

User avatar
Pablo
 
Posts: 18986
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

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

Post by Pablo » Thu Jan 23, 2020 2:18 pm

It looks correct.

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

User avatar
etcbbu
 
 
Posts: 502
Joined: Mon Apr 23, 2007 3:00 pm

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

Post by etcbbu » Thu Jan 23, 2020 4:24 pm

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..?
www.ktravisj.com

Travis J Consulting, LLC -
Website Design/Development/Maintenance, Web-Marketing/Social Media/Social Networking, SEO/Search Engine Optimization

www.ktravisj.com

User avatar
Pablo
 
Posts: 18986
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

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

Post by Pablo » Thu Jan 23, 2020 4:43 pm

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

User avatar
etcbbu
 
 
Posts: 502
Joined: Mon Apr 23, 2007 3:00 pm

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

Post by etcbbu » Fri Jan 24, 2020 11:43 pm

[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
Last edited by etcbbu on Sat Jan 25, 2020 5:39 pm, edited 1 time in total.
www.ktravisj.com

Travis J Consulting, LLC -
Website Design/Development/Maintenance, Web-Marketing/Social Media/Social Networking, SEO/Search Engine Optimization

www.ktravisj.com

User avatar
Pablo
 
Posts: 18986
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

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

Post by Pablo » Sat Jan 25, 2020 8:31 am

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

User avatar
etcbbu
 
 
Posts: 502
Joined: Mon Apr 23, 2007 3:00 pm

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

Post by etcbbu » Mon Jan 27, 2020 5:55 pm

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
www.ktravisj.com

Travis J Consulting, LLC -
Website Design/Development/Maintenance, Web-Marketing/Social Media/Social Networking, SEO/Search Engine Optimization

www.ktravisj.com

User avatar
Pablo
 
Posts: 18986
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

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

Post by Pablo » Mon Jan 27, 2020 6:08 pm

Did you follow my advise?

User avatar
etcbbu
 
 
Posts: 502
Joined: Mon Apr 23, 2007 3:00 pm

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

Post by etcbbu » Mon Jan 27, 2020 7:14 pm

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.
www.ktravisj.com

Travis J Consulting, LLC -
Website Design/Development/Maintenance, Web-Marketing/Social Media/Social Networking, SEO/Search Engine Optimization

www.ktravisj.com

Post Reply