nckprsn / scrollme Goto Github PK

Hello,
Is there a way to use the ScrollMe plugin as an AMD module?

any Idea

I am facing an issue where if height of a section changes (reduces in my case) after page load (the section contains filterable items, it could also be an accordion or tab with dynamic content) due to some user action, all scrollme animation below it start working incorrectly. The timing goes all wrong. How to fix this?

Is there any way to refresh the scrollme animation calls on some event?

correct scrollme animation of orange round icons velow when "All" works are selected by default on page load.

incorrect scrollme animation when works is filtered and height of the works (blue top) section changes / reduces, the orange round icons below are late to appear, they appear much later probably when the user has scrolled past them a long way. There are other scrollme animations on the page below, all behave this way unless the height of the top bule works section is the same as it was on page load.

I'm having an issue where the element being animated starts at the end position of the animation, and as you scroll it jumps to the start and then finishes.

<div class="image-placeholder scrollme animateme" data-crop="false" data-when="enter" data-from="0.8" data-to="0.0" data-translatey="200">
    <div class="img" style="background: url(<?php the_sub_field('image'); ?>) no-repeat center center / cover; min-height: 400px;"></div>
</div>

For example. The image starts at 0.0, jumps to 0.8, and then finishes at 0.0, thus creating a jumpy animation. What can I do to fix this?

Hello guys, I'm having an issue with scrollme js.
When I load my page at the first time it works fine as you can check here : eloisemonteiro.hol.es/

But if I click on the other pages and come back, it stops working for some reason that I can't find.

Thank you guys in advance.

Scrollme is totally broken when i set html,body{height: 100%;} .... any solution ?

Hi,
thanks for this awesome plugin.

Please consider the possibility to add callback function to each animated item like " data-callback = 'myFunction()' " or the addition of a class when the animation ends like " data-classCallback = '.myClass' "
Thanks.

Best regards
Xesc.

I like the ability to set functionality like this in the data-attrs, much like the metafizzy stuff / but when working on a project that already has 4 of 5 data-attrs on things / the markup gets pretty intense.

I would request a way to use this plugin from an external JS file / as an option. No idea how easy that would be to expose - but if it were possible / it could be very cool.

Using it in a Rails 4 app with Turbolinks, when you first hit the page it tends to trigger all animations at once.

Also, when pressing the back button to go back to the animated page the animated elements are all stuck in a start/mid transition state.

Is hard to keep track if i have the latest version or not
thank you

Hi,

Thanks for this very good plugin!

Please add the possibility to animate contents on a horizontal scrollbar.

Thanks in advance

User agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 2.0.50727; .NET CLR 3.5.21022; .NET CLR 1.0.3705; .NET CLR 1.1.4322; .NET CLR 3.0.04506.648; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729)
Date: Sat, 17 Oct 2015 07:08:28 UTC

Script error
Line: 0
Symbol: 0
Код: 0
URI: http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js

Error: 'jQuery' - not defined
Line: 7
Symbol: 1
Код: 0
URI: http://scrollme.nckprsn.com/js/jquery.scrollme.js

Error: 'jQuery' - not defined
line: 436
Symbol: 3
Код: 0
URI: http://scrollme.nckprsn.com/

===stop at:
function(b){return H||(H=n.Deferred(),"complete"

reason: object dont support property or method
in: jquery.min.js, line 2 symbol 29694

I really love this script, thanks for this easy to use tool!

I have to scroll within an fixed div instead of the document. But just changing var $document doens't seem to work :( how can I define the scrolling container?!

e.g. http://codepen.io/anon/pen/lJmvf

thx
me

Hi !

This great plugin does not work really smoothy with iPhone or iPad... Is there a way to make this point better ?

Or can we at least desactivate those animations on selected devices ?

Thanks a lot !

Hi,

Why are you not an npm? Can you push your library to npm?

Hello.

I discovered a little bug during page testing. On desktop plugin works perfect, any resolution, any aspect ratio, just great.

It's turned off for mobile devices no matter what, except for landscape tablets. Problem is that when I scroll down the page, all images and texts should appear from bottom. When I scroll on them (enter), they're in destination place not moving at all. After a liitle bit of scrollin (jus couple of px) they suddenly dissapear (translate is added via css by plugin) and then smoothly appear on the right place.

When I scroll back to top without reloading page and then scroll down again, it's working prefectly fine, so it occurs only when scrolling from top to bottom for the first time.

It creates this weird blink effect which I would like to prevent from happening.

btw: great plugin, really appreciate your job

According to jquery-migrate the error is:

JQMIGRATE: Migrate is installed with logging active, version 3.0.0 jquery-migrate.js:18:17
JQMIGRATE: 'ready' event is deprecated

Hello,

I'm trying to get scrollme to work with AngularJS but without luck for now. No event is triggered even if the scollme component is loaded (tested with console.log()). No error in the console.

Is anyone ever used scrollme with AngularJS? Any advice on this?

Thanks in advance.

All my website content is get from Ajax. Which means it only loads the framework of the site and gradually get the data inside. However, Scrollme cannot work with it. It seems only load one time at document ready. I need it to bind with jQuery's after() append() before() etc... So when I use this functions to add some new content, it will work.

IT IS NOT A FEATURE, IT IS A BUG!!!

Anyway, nice work, thanks!

Hi

May I know the way to animate image from top to bottom. From top it should start by opacity and and at bottom it should show image.

I'm using following code, but it's working as diagonal.

< img class="scrollme animateme" data-translatey="-800" data-translatex="800" data-to="0.15" data-from="0.65" data-when="view" data-opacity="0" title="image" alt="image" src="image_path" />

Please help me.

The scroll animations are not working in Windows Safari 5.1.7 (latest). Even the demo site doesn't work http://scrollme.nckprsn.com/

Is it not supported on Windows Safari? It works fine in Safari in iOS devices. Is any fix or patch available to make it work on Windows Safari?

First, this is brilliant!

The bottom toolbar that shows when scrolling down on mobile Safari breaks the window height calculation. This is evident when viewing your demo. Animations triggered on "enter" are showing for a moment when in the region of the hidden toolbar. Once past that region, it disappears then starts its animation thinking it's entering. Any chance you can recalculate the view area on mobile scroll so it knows the viewport as it changes? Thanks!

We're working on a project where we only want to load scrollme for your 'desktop' type size screens and not for small-screen/phones. Because the plugin seems to be init be default in the way that you configure in html / what would be the best way to do this, or to check a few different things to conditionally load?

Thanks.

Hi,

I can't find the way to change de data-attrs with JS and after reaload scrollme.

Any idea?

Thanks

@nckprsn anyone having issues getting this to work with v.3.1.1? I'm acquiring the files just fine, but nothing is animating. I'm a little fresh to jquery so its possible I'm making some minor mistake in my html. I've required both the jquery library and the scroll me plugin in my head tag. And at the bottom of the body I have the $(function()){}); to load the script. But the div I have decked out with the data attributes wont animate. I have everything set to the same parameters that are applied to the Usage section on the demo page (the light gray code box on the right that fades and slides in from the right is exactly what I'm trying to emulate. If anyone might spare a minute to help an eager noob I'd greatly appreciate it. Thanks!

I don't really get how to set my fixed heights to data-from and data-to, my website has an horizontal bar that has to progress through the whole page with many points in-between, how to set them? The only two values data-from and data-to recevies are 0 and 1...
Am i just dumb? Like i don't get it...

Is it possible to repeat the animation on the same element multiple times? For example: Making opacity go from 0 to 1 and then to 0 again and then back to 1.

Hi,

is there an option to have the animation only during the first scroll of the page?

Thanks for your help,
Peter.

How can i fade In object when initial page load i mean without page scrolled (for Ie. i have logo in header and i need to whn page load it will fade in.)

Hi
Can you tell me, is this plugin work with wordpress? It's seems it doesn't.

`

Hi, its very useful jquery plugin
Please add a demo page to git source and your website also.

Thanks in advance

I have page with 100% width (I shouldn't be able to scroll horizontally). When animating with data-translatex, the element is outside the bounds of the width and causes the page's width to increase (now scrollable horizontally).

Hi,

I do have this pattern:

<div
    class="category scrollme animateme"
    data-when="exit"
    data-from="0"
    data-to="0.8"
    data-opacity="0"
>
.... content about 200px high
</div>

When I put this element like 20 times bellow each other I've got pretty high column. When I scroll down, the first element is animated correct (start getting transparency when it's leaving the screen) but the more I scroll down, the sooner elements get transparency. The last ement in the column gets full transparency when it's like 20px from bottom of the screen.

Am I missing something or it's bug?

Thanks in advance.

Css translatex and translatey support percentages, the docs state that px values can be used. I feel the plugin will be much more responsive design friendly if it also supported percentages for translatex and translatey. This would be particularly helpful in a scenario where the plugin is used for parallax effect on full screen panels.

Starting about one month ago, I've noticed that ScrollMe animations have become glitchy in Chrome for both Android and Windows.

More specifically, the animated elements are duplicated with the original element never disappearing, so even if an element is supposed to scroll out of view, it remains on the page. Also when it is animating in view, the element is already at the destination, creating a strange ghosting appearance. At first I thought this was an error on my part, but I noticed it happening on the ScrollMe homepage as well.

See screenshot to get an idea of what I mean. I haven't tried to see if the issue is also present in IE or Firefox.

I'm using Firefox 30. to reproduce:

1. open http://scrollme.nckprsn.com/ in Firefox.
2. Scroll down to section Options
3. keep scrolling and you'll see that the scale fadein effect doesn't behave expectedly.

Hi,

Your plugin is great ! I'm trying to use it with a smooth scroll to make the experience even better, but I guess there's conflict on the scroll event. Any idea on how to fix it ?
Thanks a lot !

I had to use older jquery version (2.1.3) to make it work.

Hi,

Its seems to not working on mobile as well.

CSS:

body,html{
	height: 100%;
	overflow: hidden;
}
.wrap{
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	position: fixed;
	overflow-y: auto;
}

HTML:

<!doctype html>
<html>
<head></head>
<body>
<div class="wrap">
	<div class="box">
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<div class="scrollme">
			<div
				class="animateme"
				data-when="enter"
				data-from="0.5"
				data-to="0"
				data-opacity="0"
				data-translatex="-200"
				data-rotatez="90"
				>
				Yup, that's all.
			</div>
		</div>
	</div>
</body>
</html>

Hi Nick,

Example here: http://approvalarea.com/scrollme-test/

I can't explain much better than if you visit the link and see the demo in action (or, non-action). Scrollme seems to initialise, the console throws no errors, however the animateme element simply doesn't animate. I've copied the code exactly as is from your Codepen example (http://codepen.io/nckprsn/pen/IGpmc) just to make sure it wasn't something I had done in my custom code, however it still doesn't fire!

Has anyone idea what's going on here? Have tested on multiple versions of multiple browsers (Safari, Firefox, Chrome).

This does not work well (or at all) in Safari -- especially on the iphone/ipad. Will that be supported at some point?

Hi
Can you tell me, is this plugin work with wordpress? It's seems it doesn't.

Hi!

I seem to be having problems with the 'from' and 'to' feature. I'm trying to get the images on my site to slide like this http://www.solvesundsbo.com/work

It appears that some images do slide very subtly, but it doesn't exactly seem to be working. This is the code for an image for example:

<img class="project-thumbnail portrait-image animateme" data-easing="easeinout" data-when="span" data-from="0" data-to="20" data-translatez="0" data-translatey="-1000" src="http://jeremy.date/wp-content/uploads/2017/01/56henry_install1_1G2HIHf.jpg" width="385" height="500" style="opacity: 1; transform: translate3d(0px, -15px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale3d(1, 1, 1);">

The link to my site is here: http://jeremy.date

Thanks!
Fraser

scrollme not working in bootstrap tab..means in one tab it's working fine but when i click the another tab then animation is not working..need help

can you please insert License note. Thank You

Suppose that I scroll down the page so that some animateme elements are outside and above the viewport. I then reload the page with the browser retaining the current viewport position. When I then scroll upward, the animateme elements above the viewport do not appear until they arrive at the position where their animation ends (e.g., half way up the viewport), at which point the elements pop into view. This makes for some awkward disappearing/reappearing effects.

Here's an example of such an element:

`

Hi,

Plug-in not working with Angular 5, could you please some help suggest to make it working?