Sliding image from left to right

[jerryco]

Hello folks, I was wondering if any of you know by heart how to do this:

I would like an image to enter on the left side of the screen, slide through horizontally, and leave on the right side.

I know there are a zillion options, but was wondering if this is my lazy ticket to succes

[Pablo]

You can use animations or scroll transitions.
http://wysiwygwebbuilder.com/bookmark_events.html
http://wysiwygwebbuilder.com/scroll_transitions.html

[jerryco]

If I say, it's not clear enough, you will probably say, what is not clear enough?

I'm looking for a complete flight plan, not just the ticket. I will simply wait and wait, and wait.

[Pablo]

What information are you missing?
What did you try and where does it stop working?

[Siegbert]

You can find many instructions on Youtube, which you can also build.
Search for: WYSIWYG Web Builder Animations

[jerryco]

The reason that I'm still persuing this, is because I have absolutely nothing else to do

So, a friendly person shared his views with me, but I will have to work out the problems myself.

Below, you can see my trial. Now, the problem is that the picture does not exit on the right side of the screen, but before that. I included a screenshot of that as well.





Problem:

[Pablo]

This does not look correct.
Why are you using show and hide event for the same object? This will most certainly cause a conflict.

Also, 'onload' is usually not the best place to handle animations because scripts may not have been loaded yet at this poijnt.
It's better to use a timer or 'document-ready' for this.

[jerryco]

So is there anybody who holds the magic key here? Showing me a page with information is like giving me keys for a Lambourgini where I am used to riding a horse. Thank you for understanding.

Once again, what I would like to know is:

How can I make a picture (a vacuum robot if you have to know) 'drive by'. So it reveals itself on the left side. And it disappears on the right side. I do not use breakpoints in my design.

[crispy68]

Is the robot to appear and scroll to the right the second the page is loaded? Is this something to happen on initial load of the page at the top or later down the page when someone scrolls to it?

[jerryco]

Hi, yes, it should go once the page is opened. There is no scroll bar and the picture is in sight immediately.

For you to see, it would be nice a little under my e-mail address.

https://levensgenoot.nl/contact.html

[Pablo]

Here are a few templates that may be helpful. They all demonstrate different ways to trigger animations on scroll.
http://www.wysiwygwebbuilder.com/suppor ... 5_red.html
http://www.wysiwygwebbuilder.com/suppor ... orate.html
http://www.wysiwygwebbuilder.com/suppor ... world.html
http://www.wysiwygwebbuilder.com/suppor ... onday.html
http://www.wysiwygwebbuilder.com/suppor ... onuts.html
http://www.wysiwygwebbuilder.com/suppor ... ibiza.html

If the animation you are looking for does not exist then you can create in yourself:
http://wysiwygwebbuilder.com/animation.html

[crispy68]

Are you look for something like this?

https://www.wizbangwebdesign.com/demo/irobot

The animation was created by taking one of the animations already created and tweaking it. You may have to tweak more to what you want.

[jerryco]

Hi crispy68, the animation is exactly what I am looking for, but I would want it to appear automatically without scrolling (the page content does not require a scroll either, plenty of space).

[crispy68]

Here is what I did:

In my demo, the small text and email is in a layout grid.

1. Insert a floating layer below the email address set to full width. Set the 'Overflow' property of the layer to 'hidden'. Insert the image of the irobot into this layer and make the height of the layer match the height of the image.

2. Go to Tools --> Animation Manager and locate the 'slide-left-in' animation. Select it and make a copy. Open up the copy and change the name of the animation to whatever you want (ex: slide-left-to-right). I changed the following keyframes:

0 opacity 0 - change to - 0 visibility visible
100 opacity 1 - change to - 100 visibility hidden

open up the: 0 transform property and change the 'Translate X' from 100% to -300px (change the 300 to whatever the width of your image is)
open up the: 100 transform property and change the 'Translate X' from 0 to calc(100vw + 300px) (again change the 300 to whatever the width of your image is). Also, make sure there is a space before and after the plus sign.

3. Go back and open up the properties of the layer, click on Events and add the following:

Event = onscrollreveal
Action = animate (css3)
Target = your image ID
Animation = slide-left-to-right (or whatever name you gave it)
Duration = 15000 (or whatever you want - this is 15sec)

4. Click on the image in the Object Manager and uncheck the visible box to make it not visible. This will keep it from flashing and briefly seeing it when the page loads.

[jerryco]

First; thanks. Before I do this; can you confirm that it will work without having to scroll?

[crispy68]

Does my demo work without scrolling?

[jerryco]

Hmm, on my main browser (Firefox) your demo only goes after scrolling a little bit. It may simply be my browser (I disabled NoScript). It does work immediately on Chrome and Opera. Could you check using Firefox?

[crispy68]

Yes it works on FF.

Wouldn't matter how I set it up, if you have noscript enabled it wouldn't work anyway.

It uses onscrollreveal. So as long as it is visible in the browser it will work. Plus you wouldn't want it to animate if it was technically offscreen would you?

[jerryco]

Thank you so much. I will have a play over the weekend and let you know what happens.

[jerryco]

I cannot seem to deal with a layout grid. When I insert it, it just keeps sticking on the top of the screen. Any thoughts? Once again, I just don't ever use elements like this. Sorry.

[Pablo]

This is normal behavior.

Related tutorial:
http://wysiwygwebbuilder.com/layoutgrid_part1.html

[jerryco]

Dear crispy68, is the layout grid required?

[Pablo]

is the layout grid required?

No

[jerryco]

Okay, wow, I never did anything this complicated in my life

I simply uploaded it for you to see: https://levensgenoot.nl/contact.html
I left the layer's background to what it is (off-white) so we can see where it is. On top, apparently

Here are the settings from the animation window:



The picture I'm using is 155 width, 158 height.

[crispy68]

Sorry, i used a layout grid as I assumed you were making a responsive floating layout.

Please go back and re-read step #2 regarding change the opacity property to the visibility property. It is incorrect.

[jerryco]

I think I used 100 for visible and 0 for invisible. I could not see visibility visible and visibility hidden?

Could you give me the stupid treatment for changing the wrong values?

[crispy68]

just type in the value.... so type 'visible' and 'hidden'.

[jerryco]

Some things are easy Getting close, please see:
https://levensgenoot.nl/contact.html

I can't drag the layer lower in WWB. Any thoughts?

[crispy68]

What kind of layer are you using?

If you are using a floating layer (like I indicated initially) but you are not creating a floating layout then try changing the floating layer to just a regular default layer. I havent actually tried this yet.

I just assumed you were creating a floating layout and not a fixed layout.

[jerryco]

Crispy! Crispy! Crispy!

And, after many days, it was so: https://levensgenoot.nl/contact.html

Thank you.

[jerryco]

So, on with the stupidity. I used the Animation Manager, right? To create a copy and then make a new one. What will happen if I upgrade to a new version of Web Builder?

[Pablo]

Your personal animations will not be overwritten.

[jerryco]

Great.

[jerryco]

Hello Pablo, just wondering if I change to a new machine, how would that affect my project's animation?

[Pablo]

Usually when you move to a new machine, then you should copy the entire document folder.
This includes custom animations.

Related FAQ:
http://www.wysiwygwebbuilder.com/forum/ ... 10&t=30276

[jerryco]

Now I see it, animations.dat. Makes sense now. Thanks.