[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

CSS Animation Triggered Too Early

Posted on 2014-04-11
13
Medium Priority
?
700 Views
Last Modified: 2014-04-11
Hi, i am using CSS / JS animation transitions on my site. When you scroll the page it triggers various sections to animate (fade in).

I am trying to adjust the animation scroll trigger so that the animation is triggered sooner on scroll.

I have adjusted all of the settings, however there is still one area that is taking too long to trigger... which is the first section under the banner:

ss
I have managed to get all of the other sections to trigger early apart from this one. Can anyone help with this one, thanks in advance

site link
0
Comment
Question by:oo7ml
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 7
  • 6
13 Comments
 
LVL 54

Expert Comment

by:Scott Fell, EE MVE
ID: 39993686
Can you point to the parts int the code you are talking about.
0
 

Author Comment

by:oo7ml
ID: 39993692
Thanks Scott. Code below... i just changed the text slightly as don't want to get picked up by SEO (not sure if EE does or not)

<div class="row heading animated fadeInDown">
					<div class="col-sm-6 col-sm-offset-3 col-md-6 col-md-offset-3 col-lg-6 col-lg-offset-3">
												<h2>th3 l0cal mult1-st0r3</h2>
																		<p>lovel0cal brings all l0cal sh0ps and busin355es together to cr3ate 0ne large comb1ned mult1-st0re which enables them to compete with larger mult1national sh0ps.</p>
												
					</div>
				</div>

Open in new window

0
 
LVL 54

Expert Comment

by:Scott Fell, EE MVE
ID: 39993722
Are we only looking at the animate.css?  or is there an js/jquery at play?

Yes, google does pick up the text in these threads pretty quickly.  If you mark the question private that prevents google from crawling the page.
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 

Author Comment

by:oo7ml
ID: 39993759
There is JS too... if you look at the source code you will see:

return false; });
jQuery('.hype-waypoint').waypoint(function() {
var animation = jQuery(this).attr("data-animate");
var duration = jQuery(this).attr("data-delay");
$(this).delay(duration).queue(function(){
jQuery(this).addClass(animation);
jQuery(this).addClass('animated');
$(this).dequeue(); });
}, { offset: '85%' });
});

Open in new window

0
 
LVL 54

Expert Comment

by:Scott Fell, EE MVE
ID: 39993784
This piece of code
attr("data-delay")

Open in new window


will refer to something like
<div class="myclass" data-delay="4">Stuff</div>

Open in new window

0
 
LVL 54

Expert Comment

by:Scott Fell, EE MVE
ID: 39993785
In your code you have
<div class="hype-waypoint" data-animate="fadeInUp" data-delay="200">

Open in new window


By adjusting that number, you should be able to adjust your animation timing.
0
 

Author Comment

by:oo7ml
ID: 39993829
Thanks Scott, however the delay and trigger are two different things.

I have already tried changing all of the delays but they are different... they reference the delay when it is triggered... so essentially i need to trigger earlier and then the delay can kick in.
0
 
LVL 54

Expert Comment

by:Scott Fell, EE MVE
ID: 39993882
I'm not familiar with waypoints.  It looks like the waypoint argument for "offset" that is set to 85% from the top.  You could try decreasing that number.  And there are some page load time issues.  You might want to start combining and compressing files.  

Let me know how decreasing the offset argument works.
0
 

Author Comment

by:oo7ml
ID: 39993948
Thanks Scott... that is exactly what i have done.... i had the offset set to 50% originally and then changed it to 85%.

This worked perfect for all of the animations apart from the one mentioned above - for some reason it seems to have it's own setting somewhere.
0
 
LVL 54

Accepted Solution

by:
Scott Fell,  EE MVE earned 2000 total points
ID: 39994045
I would probably start by making a copy, and pulling things out of the page.    In google chrome it seems to work fine although after you scroll to the bottom the first time then scroll back up, once you scroll down the animation is not there.  

I would start by rendering the page, view source , copy and paste to a new page.  That eliminates any issues with ajax.  Then remove all the ajax calls.  Then start pulling things out and see what happens.

I tried looking at the console and there is a lot going on and couldn't pin point.
0
 

Author Comment

by:oo7ml
ID: 39994592
Ok cool, thanks for your help... it is only something small but these smalls things annoy me :-)
0
 
LVL 54

Expert Comment

by:Scott Fell, EE MVE
ID: 39994600
I think the site looks great and I love the concept for this app.  

My only suggestion for the site is do you need to have the beginning animation with the 3 dots. I know that has been done in the past to prevent FOUT but for speed of loading I prefer to remove.
0
 

Author Comment

by:oo7ml
ID: 39994630
Thanks Scott, much appreciated.

Yeah i was thinking of removing that too. Thanks for all your help (and on other questions).
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses four methods for overlaying images in a container on a web page
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

656 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question