*SOLVED* Make "Fade In Left" effect happen in viewport *SOLVED*
Forum rules
IMPORTANT NOTE!!
DO YOU HAVE A QUESTION OR PROBLEM AND WANT QUICK HELP?
THEN PLEASE SHARE A "DEMO" PROJECT.
PLEASE READ THE FORUM RULES BEFORE YOU POST:
http://www.wysiwygwebbuilder.com/forum/viewtopic.php?f=12&t=1901
MUST READ:
http://www.wysiwygwebbuilder.com/getting_started.html
WYSIWYG Web Builder FAQ
IMPORTANT NOTE!!
DO YOU HAVE A QUESTION OR PROBLEM AND WANT QUICK HELP?
THEN PLEASE SHARE A "DEMO" PROJECT.
PLEASE READ THE FORUM RULES BEFORE YOU POST:
http://www.wysiwygwebbuilder.com/forum/viewtopic.php?f=12&t=1901
MUST READ:
http://www.wysiwygwebbuilder.com/getting_started.html
WYSIWYG Web Builder FAQ
*SOLVED* Make "Fade In Left" effect happen in viewport *SOLVED*
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
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.
https://travisjconsulting.com
Travis J Consulting, LLC
⚫️Website Design/Development/Maintenance
⚫️Web-Marketing/Social Media
⚫️SEO/Search Engine Optimization
https://travisjconsulting.com
Travis J Consulting, LLC
⚫️Website Design/Development/Maintenance
⚫️Web-Marketing/Social Media
⚫️SEO/Search Engine Optimization
https://travisjconsulting.com
Re: Make "Fade In Left" effect happen in viewport
You can use 'onscollreveal' events to trigger the animation when it comes into view.
For example:
http://wysiwygwebbuilder.com/bookmark_events.html
For example:
http://wysiwygwebbuilder.com/bookmark_events.html
Re: Make "Fade In Left" effect happen in viewport
https://travisjconsulting.com
Travis J Consulting, LLC
⚫️Website Design/Development/Maintenance
⚫️Web-Marketing/Social Media
⚫️SEO/Search Engine Optimization
https://travisjconsulting.com
Travis J Consulting, LLC
⚫️Website Design/Development/Maintenance
⚫️Web-Marketing/Social Media
⚫️SEO/Search Engine Optimization
https://travisjconsulting.com
Re: Make "Fade In Left" effect happen in viewport
Did you try?
Note that there are many templates that demonstrate how to do this:
http://wysiwygwebbuilder.com/templates8.html
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
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
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
https://travisjconsulting.com
Travis J Consulting, LLC
⚫️Website Design/Development/Maintenance
⚫️Web-Marketing/Social Media
⚫️SEO/Search Engine Optimization
https://travisjconsulting.com
Travis J Consulting, LLC
⚫️Website Design/Development/Maintenance
⚫️Web-Marketing/Social Media
⚫️SEO/Search Engine Optimization
https://travisjconsulting.com
Re: Make "Fade In Left" effect happen in viewport
Did you use onscrollreveal?
Re: Make "Fade In Left" effect happen in viewport
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
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
https://travisjconsulting.com
Travis J Consulting, LLC
⚫️Website Design/Development/Maintenance
⚫️Web-Marketing/Social Media
⚫️SEO/Search Engine Optimization
https://travisjconsulting.com
Travis J Consulting, LLC
⚫️Website Design/Development/Maintenance
⚫️Web-Marketing/Social Media
⚫️SEO/Search Engine Optimization
https://travisjconsulting.com
Re: Make "Fade In Left" effect happen in viewport
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..?
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..?
https://travisjconsulting.com
Travis J Consulting, LLC
⚫️Website Design/Development/Maintenance
⚫️Web-Marketing/Social Media
⚫️SEO/Search Engine Optimization
https://travisjconsulting.com
Travis J Consulting, LLC
⚫️Website Design/Development/Maintenance
⚫️Web-Marketing/Social Media
⚫️SEO/Search Engine Optimization
https://travisjconsulting.com
Re: Make "Fade In Left" effect happen in viewport
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
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
[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
Thank you.
Can you please let ms know when you see it so that I can delete project from my web-space?
--etcbbu
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
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.
https://travisjconsulting.com
Travis J Consulting, LLC
⚫️Website Design/Development/Maintenance
⚫️Web-Marketing/Social Media
⚫️SEO/Search Engine Optimization
https://travisjconsulting.com
Travis J Consulting, LLC
⚫️Website Design/Development/Maintenance
⚫️Web-Marketing/Social Media
⚫️SEO/Search Engine Optimization
https://travisjconsulting.com
Re: Make "Fade In Left" effect happen in viewport
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
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
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
Again, it's the "1", "2", "3" image icons toward the bottom of the page at https://www.ktravisj.com .
--etcbbu
https://travisjconsulting.com
Travis J Consulting, LLC
⚫️Website Design/Development/Maintenance
⚫️Web-Marketing/Social Media
⚫️SEO/Search Engine Optimization
https://travisjconsulting.com
Travis J Consulting, LLC
⚫️Website Design/Development/Maintenance
⚫️Web-Marketing/Social Media
⚫️SEO/Search Engine Optimization
https://travisjconsulting.com
Re: Make "Fade In Left" effect happen in viewport
Did you follow my advise?
Re: Make "Fade In Left" effect happen in viewport
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.
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.
https://travisjconsulting.com
Travis J Consulting, LLC
⚫️Website Design/Development/Maintenance
⚫️Web-Marketing/Social Media
⚫️SEO/Search Engine Optimization
https://travisjconsulting.com
Travis J Consulting, LLC
⚫️Website Design/Development/Maintenance
⚫️Web-Marketing/Social Media
⚫️SEO/Search Engine Optimization
https://travisjconsulting.com