mpalpha / animate-scroll Goto Github PK

View Code? Open in Web Editor NEW

194.0 19.0 86.0 31 KB

A mobile friendly viewport triggered animation jQuery Plugin using greensock.

Home Page: http://www.jasonlusk.com/scroll

License: GNU General Public License v2.0

JavaScript 69.23% HTML 30.77%

animate-scroll's Introduction

looking for a current alternative?

try a custom solution using ScrollMagic and GSAP or Animate On Scroll by Michal Sajnóg

animate-scroll DEPRECATED - no longer actively maintained

Plugin Name: jQuery Animation Scroll Plugin
Plugin Description: animate-scroll is a mobile friendly viewport triggered animation plugin for jQuery using greensock.
Copyright (C) 2014 Jason Paul Lusk ([email protected])
Author: Jason Lusk
Author URI: http://JasonLusk.com
GIT URI: https://github.com/mpalpha/animate-scroll.git
Tip: https://cash.me/$JasonLusk

DEMO http://www.jasonlusk.com/scroll

Requirements:

jQuery.js v1.10.1+ from www.jquery.com.
TweenMax.js 1.10.2+, TimelineMax.js v1.10.2+, EasePack.js v1.9.3+ from www.greensock.com.

Install:

    bower i mpalpha/animate-scroll

Initialize:

    $(document).animateScroll();

Configure:

Available Options	Default value	Description
transformPerspective	1000	Parent transform perspective
lazyLoad	false	Lazy load images (experimental)
animateAll	false	Animate elements outside of viewport?
reverse	true	Allow elements reverse animation state?
transformOrigin	'50% 50%'	Transform origin X/Y position
x	0	Horizontal offset in px
y	0	Vertical offset in px
scaleX	1	Scale X position
scaleY	1	Scale Y position
rotation	0	Rotation in degrees
rotationX	0	Rotation X position
rotationY	0	Rotation X position
alpha	0.9	Opacity from 0.0-1
delay	0	Animation delay
z	0.1	Z position
force3D	true	Force 3D hardware
easingType	'Back.easeInOut'	Animation easing type
duration	0.3	Animation diration in seconds

Implement:

    <p data-animate-scroll='{  
      "scaleX": "1.5",  
      "scaleY": "1.5",  
      "x": "-10",  
      "y": "-10",  
      "rotation": "-3",  
      "alpha": "1",  
      "easingType": "Cubic.easeOut",  
      "duration": "1"  
      }'>test</p>

Events (Optional):

Type	Example
play	`$('.my-animated-element').trigger('play');`
reverse	`$('.my-animated-element').trigger('reverse');`
check	`$('.my-animated-element').trigger('check');`

animate-scroll's People

Contributors

Stargazers

Watchers

Forkers

sirajgadhia dimasik9081 mzaila yashilanka vrigzalejo output ayalamac michael-gabenna henrytran9x 925800521 kerrongordon omurbingul liukaijv jonny77 hcxiong zhuyuanwen fenggnaw ubuntuvim michealjou seco matey15 akhbar cuongpx r0mk1n caramann mengyifan sshyran ultimatepau spluf seshankannasamudram pylixm ratankumarrebari popoypo ridzwanspade ialopezc najihahmsy luchens l-777 brainsucked mominulbd thaomario paddysolo preedasaky devwork-g libin1991 fadlimuharram caliopedanini lbmmmg belosnezka stantoxt badoni jaysonleal sh3fas awant75 madalinamarian mohkhalilkhan sylvesternnachi petercannon aligoksoy asz69 geraldogonzalez alok2307 estefa77 anthonyszy daherk2 tran-dinh-dat ramirogavagnin celestialbunny alanleverenz appserviceprovider adepeju4 imrazu maheshbrodev johnnyma shahaabz salmaqueen gagomezadeveloper allsmi noor-muhammadd yadavashishdhirendra abdallah-s wwwk niceattack thejanpasindu aero012 edgarsandovaldev

animate-scroll's Issues

how can I make items animating no needed to wait till page scrolling stopped?

I want to see animation when scrolling.
thank you guy!

ReferenceError: TweenMax is not defined

Hi!
Can't make a plugin to work - getting this message.

ReferenceError: TweenMax is not defined
TweenMax.set($parent, {

Help please...
jQuery v2.1.1

Current effects in demo library

I am checking the demo , It would be nice if we can have the separate file for each effect
i meant an attribute for each effect .

No animation on scroll

Hi.

When the page loads the animation is fine but when I scroll up and down nothing happens. And I'm following your implementation. I'm even copying the exact setup from your demo page: http://www.jasonlusk.com/scroll. Still nothing happens on scroll, do you know how to make it work properly? Is there any extra css class or javascript method to use, etc?

http://www.jasonlusk.com/scroll is 404 error page

I can access demo page(http://www.jasonlusk.com/scroll) on desktop and mobile because 404 error

found some issues

I use the latest packs from https://github.com/greensock/GreenSock-JS to update my projects, and found some animation works weird.
likes below:

    <div class="row">
        <div class="col-xs-6" style="padding-right: 7px"
             data-animate-scroll='{"x": "0","y": "300", "alpha": "0", "duration": "0.5"}'>
            <img src="http://placehold.it/440x250" class="img-responsive img-rounded"/>
        </div>
        <div class="col-xs-6" style="padding-left: 7px"
             data-animate-scroll='{"x": "0","y": "300", "alpha": "0", "duration": "0.5"}'>
            <img src="http://placehold.it/440x250" class="img-responsive img-rounded"/>
        </div>
    </div>

the images will disappear after animation.

Disappearing a little too soon.

I noticed my text is disappearing too soon.
Also when having an image on top and scrolling down and up again the image doesn't shows up again :(