the animation from scrollReveal.js doesn't work as intended

Hello there,
I'm trying to animate two floated divs, one from left and the other from right but something doesn't work.
There isn't too much of a documentation for this library, just two lines in the demo template. The examples on the developer's page don't work, because maybe you have changed the library somehow.
This is my html:

Code: Select all

<div class="left-object" data-scroll-reveal="enter left and move 50px over 0.45s" data-scroll-reveal-initialized="true" data-scroll-reveal-complete="true">
<p><img style="width:100%;" src="images/something.jpg" alt="" /></p>
</div>
<div class="right-object" data-scroll-reveal="enter right and move 50px over 0.45s" data-scroll-reveal-initialized="true" data-scroll-reveal-complete="true">
<h1 style="text-align: right;">Header</h1>
<p style="text-align: justify;">Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text </p>
</div>
<p><a class="gkScrollDown gkAnimate reverse" href="#the-next-one">&nbsp;</a></p>

The CSS for the left and right floating div is:

Code: Select all

.left-object {
     float: left;
     width: 47%;
  }

.right-object {
     float: right;
     width: 47%;
  }


I decided to move them in a css file instead in the html because the right div somehow was floated in left but this didn't help. I get various effects like cached old data.
The site is on a local machine. All the caches are turned off.

Please help me, because the deadline for this project is on 27.10.
Thank you in advance.

Without access to a live site I can't help .
Perhaps you could post it somewhere live for the time being?
Ps - Due to time zone difference and our 48h response rule it might be not possible to solve this question before 27th.

Hi, Cyberek,
my site is live now. Here's the address: albena.freemindesign.com
Please, take a look at it.

Thank you in advance.
Florian

p.s. another mistery - when you scroll the page, the menu items change its color depending of which one is showing in the browser at the moment. When I turn of from the backend the last two items from the menu, everyhing is in place. Is there anything wrong with these two modules/menu items or the script reaches some number limitation because the page is very long?

p.s. another mistery - when you scroll the page, the menu items change its color depending of which one is showing in the browser at the moment. When I turn of from the backend the last two items from the menu, everyhing is in place. Is there anything wrong with these two modules/menu items or the script reaches some number limitation because the page is very long?

I found out why. I didn't add the IDs of the modules.
but the first problem is still there - the animation of the floated divs doesn't work.

It still doesn't work with the last item of the menu - "Kontakte" ..when I turn it off - it works.

1. Please do not bump your questions - it will always make you wait longer.
2. Let's solve things one by one - we have a rule here - one topic, one problem, one solution.

The problem with scrolling is caused by your pretty big header (menu splitted into 2 lines). But you can fix it by editing:
templates/gk_john_s/js/gk.scripts.js
file and changing:

Code: Select all

                       jQuery('html, body').stop().animate({
                           'scrollTop': target.offset().top
                       }, 1000, 'swing', function () {
                           if(this.hash !== '#') {
                               window.location.hash = target.selector;
                           }
                       });


to:

Code: Select all

                       jQuery('html, body').stop().animate({
                           'scrollTop': target.offset().top-100
                       }, 1000, 'swing', function () {
                           if(this.hash !== '#') {
                               window.location.hash = target.selector;
                           }
                       });


where 100 is your header height (in pixels).

Sorry, didn't want to offend you. I'll follow the rules of this forum, of course.
Now to the topic. This code didn't solve me the problem. It made something like a hiccup of the animation in the last 100 pixels and then move to the end. Anyways, this is the smaller problem.
What we do with the problem form the topic of this conversation - the scrollReveal.js problem. I need to animate these pictures and texts so they fly in from left and right. When I make the second (right) div floated in left, the animation starts, otherwise it doesn't. A possible workaround is to add a right margin to the first div and make the second one floated left. I'll try this but please you try to find why is this problem and how to be fixed elegantly so it could work with any content, positioned the way you like it.
Thank you in advance. I still could do any changes to the site (it's only a landing page though) 'till 30.10. Please, provide a solution for this.Thank you again.

case closed

And what was the solution?

As you can see I added

Code: Select all

data-scroll-reveal-initialized="true" data-scroll-reveal-complete="true"

in my html, because I saw that in the generated page, but that broke the js animation. Your js code adds the above code automatically so one don't need to add it manually in his custom html module. So I removed it and the animation worked.
That was the solution.

Ok, thanks for sharing. If you have any additional questions regarding this topic, please let me know.