janpaepke/scrollmagic

The javascript library for magical scroll interactions.

ScrollMagic v2.0.8

The javascript library for magical scroll interactions.

Quicklinks: About | Download | Installation | Usage | Help | Compatibility | Author | License | Thanks

---

🚨 ScrollMagic 3.0 is on the horizon. Helpers & Testers wanted! 🚨

---

ScrollMagic helps you to easily react to the user's current scroll position.
It's the perfect library for you, if you want to ...

• animate based on scroll position – either trigger an animation or synchronize it to the scrollbar movement (like a playback scrub control).
• pin an element starting at a specific scroll position – either indefinitely or for a limited amount of scroll progress (sticky elements).
• toggle CSS classes of elements on and off based on scroll position.
• effortlessly add parallax effects to your website.
• create an infinitely scrolling page (ajax load of additional content).
• add callbacks at specific scroll positions or while scrolling past a specific section, passing a progress parameter.

Check out the demo page, browse the examples or read the documentation to get started.
If you want to contribute please get in touch and let me know about your specialty and experience.

About the Library

ScrollMagic is a scroll interaction library.

It's a complete rewrite of its predecessor Superscrollorama by John Polacek.
A plugin-based architecture offers easy customizability and extendability.

To implement animations, ScrollMagic can work with multiple frameworks. The recommended solution is the Greensock Animation Platform (GSAP) due to its stability and feature richness. For a more lightweight approach, the VelocityJS framework is also supported. Alternatively, custom extensions can be implemented or the necessity of a framework can be completely avoided by animating simply using CSS and class toggles.

ScrollMagic was developed with these principles in mind:

• optimized performance
• lightweight (6KB gzipped)
• flexibility and extendibility
• mobile compatibility
• event management
• support for responsive web design
• object-oriented programming and object chaining
• readable, centralized code, and intuitive development
• support for both x and y direction scrolling (even both on one page)
• support for scrolling inside div containers (even multiple on one page)
• extensive debugging and logging capabilities
• detailed documentation
• many application examples

Is ScrollMagic the right library for you?
ScrollMagic takes an object-oriented approach using a controller for each scroll container and attaching multiple scenes defining what should happen at what part of the page. While this offers a great deal of control, it might be a little confusing, especially if you're just starting out with javascript.
If the above points are not crucial for you and you are just looking for a simple solution to implement css animations I would strongly recommend taking a look at the awesome skrollr project. It almost solely relies on element attributes and thus requires minimal to no javascript knowledge.

Availability

To get your copy of ScrollMagic you have the choice between four options:

Option 1: GitHub
Download a zip file containing the source code, demo page, all examples and documentation from the GitHub releases page or clone the package to your machine using the git command line interface:

git clone https://github.com/janpaepke/ScrollMagic.git

Option 2: Bower
ScrollMagic is also available on bower and will only install the necessary source code, ignoring all example and documentation files.
Please mind that since they are not core dependencies, you will have to add frameworks like GSAP, jQuery or Velocity manually, should you choose to use them.

bower install scrollmagic

Option 3: npm
If you prefer the node package manager, feel free to use it.
Keep in mind that like with bower non-crucial files will be ignored (see above).

npm install scrollmagic

Option 4: CDN
If you don't want to host ScrollMagic yourself, you can include it from cdnjs:

https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/ScrollMagic.min.js

All plugins and uncompressed files are also available on cdnjs.
For example:

https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/debug.addIndicators.js
https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/debug.addIndicators.min.js

Installation

Include the core library in your HTML file:

<script src="js/scrollmagic/uncompressed/ScrollMagic.js"></script>

And you're ready to go!
For deployment use the minified version instead:

<script src="js/scrollmagic/minified/ScrollMagic.min.js"></script>

NOTE: The logging feature is removed in the minified version due to file size considerations.

To use plugins like the indicators visualization, simply include them in addition to the main library:

<script src="js/scrollmagic/uncompressed/plugins/debug.addIndicators.js"></script>

To learn how to configure RequireJS, when using AMD, please read here.

Usage

The basic ScrollMagic design pattern is one controller, which has one or more scenes attached to it.
Each scene is used to define what happens when the container is scrolled to a specific offset.

Here's a basic workflow example:

// init controller
var controller = new ScrollMagic.Controller();

// create a scene
new ScrollMagic.Scene({
	duration: 100, // the scene should last for a scroll distance of 100px
	offset: 50, // start this scene after scrolling for 50px
})
	.setPin('#my-sticky-element') // pins the element for the the scene's duration
	.addTo(controller); // assign the scene to the controller

To learn more about the ScrollMagic code structure, please read here.

Help

To get started, check out the available learning resources in the wiki section.
Be sure to have a look at the examples to get source code pointers and make use of the documentation for a complete reference.

If you run into trouble using ScrollMagic please follow the Troubleshooting guide.

Please do not post support requests in the github issue section, as it's reserved for issue and bug reporting. If all the above options for self-help fail, please use Stack Overflow or the ScrollMagic Premium Support.

Browser Support

ScrollMagic aims to support all major browsers even in older versions:
Firefox 26+, Chrome 30+, Safari 5.1+, Opera 10+, IE 9+

About the Author

I am a creative coder based in Vienna, Austria.

Learn more on my website or Follow me on Twitter

License

ScrollMagic is dual licensed under the MIT license and GPL.
For more information click here.

Thanks

This library was made possible by many people who have supported it with passion, donations, or advice. Special thanks go out to John Polacek, Jack Doyle, Paul Irish, Nicholas Cerminara, Kai Dorschner, Petr Tichy and Dennis Gaebel.

scrollmagic's Issues

Scroll to a specific scene

Is there a method to support this? Basically I have a navigation menu, and it allows users to jump to a specific scene. How do I do this?

Thanks.

Classnames with Separate Triggers

I am using your plugin on a Wordpress blog.
http://webshowcase.tk/wp1/?page_id=114

Every post on the page is wrapped around an article tag with the class name .food
I created a TimelineMax with my animation and am using 'article.food' as a trigger but whenever the first element with that classname is reached it animates everything with the class names in my timeline.

What I want to do is animate the post only when I reach it (it is in my viewport). Currently I am trying to use $('.article.food').each() with this as the trigger. Unfortunately I am not having much luck. Here is my current code:

$('.article.food').each(function(){
    var currentArticle = $(this);

var tweenArticle = new TimelineMax()
.from($(currentArticle +' > header.food_header > hgroup'), 3, {opacity:0, top:'-40px', ease: Power4.easeOut},0)
.from($(currentArticle + ' > section > summary > p'), 3, {opacity:0, top:'40px', ease: Power4.easeOut},0);

var scene = new ScrollScene({triggerElement: currentArticle, triggerHook:.5})
    .setTween(tweenArticle)
    .addTo(controller);

scene.addIndicators();  
});

I'm not sure what I am doing wrong. Is there another way to have every post with the classname .food have it's own start and end and trigger without having to create a new scene for each post (posts can be variable so a scene for each posts is unreliable)?

Listening to events to stop video when scene leaves and play when it enters

Im trying to stop the video when the scene leaves and the play it when it reenters, but all the events fire at once. What Im doing is this:

function callback (event) {
              if(event.type=="enter")
                   vid.play();
               else   if(event.type=="leave")
                   vid.pause();
}

// add listeners
 videoStart_scene.on("enter leave", callback);

It just fires all events at once and never fire another event upon reentering.

What Im doing wrong?

Thanx!!

Animation Flickering on Google Chrome

So, i used magic scroll on a site i made and it works fine on firefox, but on chrome, if i scroll using the mouse wheel the animation flickers, only while using the mouse wheel.
I'm not really sure its a bug with the library or what, but i can't seem to fix it. I searched a few things on Stackoverflow and tried with no luck.

Here's the code of the animation:

        var controller = new ScrollMagic();

        var parallax01 = new ScrollScene({triggerElement: "#sIntro"     , duration: 1811, offset:  300}).setTween(TweenMax.fromTo("#sIntro" , 8, {backgroundPosition: "0px -100px"}, {backgroundPosition: "0px 671px", ease: Linear.easeNone})).addTo(controller);

        var parallax02 = new ScrollScene({triggerElement: "#sVideo"     , duration: 2080, offset: -350}).setTween(TweenMax.fromTo('#Introbg2', 8, {top: -780}, {top: 350, ease: Linear.easeNone})).addTo(controller);

        var parallax03 = new ScrollScene({triggerElement: "#sPropaganda", duration: 1800, offset: -650}).setTween(TweenMax.fromTo('#Introbg3', 8, {top: -0}, {top: -530, ease: Linear.easeNone})).addTo(controller);

        var parallax04 = new ScrollScene({triggerElement: "#sEdificio"  , duration: 2300, offset: -650}).setTween(TweenMax.fromTo('#Introbg4', 8, {top: -857}, {top: 200, ease: Linear.easeNone})).addTo(controller);

        var parallax05 = new ScrollScene({triggerElement: "#sContato"   , duration: 800, offset: -100}).setTween(TweenMax.fromTo('#Introbg5', 8, {top: -1380}, {top: 0, ease: Ease.easeOut})).addTo(controller);

Sorry if i did anything wrong while posting this, its my first time using this site so i'm not yet used to how do things here.
If you guys need to look at the jquery code or the html code, just ask. These animations are happening on many images, inside different sections.
as i said, the only problem is when you scroll using mouse wheel, and only on google chrome.

Jumping pinned element

Hi
firstly I'd like to thank you for a great job with this library! I've tried a few other libraries and found yours the easiest and most intuitive to use. I'm building a website, where I've got a chemical apparatus in SVG with simple animation - just revealing and hiding particular elements, while scrolling.
I've pinned my SVG and I do the animation on the scroll, having the SVG in the middle of a page. Unfortunately what I observe is that in Chrome, IE11 and Opera it works great, but in Firefox the pinned element jumps while scrolling - it moves up and down by a few pixels. It's very likely I do something wrong, but I would appreciate if you could point me to my mistake. Or maybe there's something with the library...
Please have a look at this page: http://magdalenakrzys.pl/beta/ if you don't mind helping me. Please bear in mind that the page is still being developed, so there might be some flaws :-)
Thank you in advance.

Trigger when one element hits another

Instead of something entering the view port could I have it trigger an animation when it detects one element is under another ?

How would I fake this if it isn't possible ?

v1.05

produces a black screen, animations completely broken. :(

Calculate remaining scrollable content of a scene

Hi Jan,

Is there a way to calculate remaining scrollable content of a scene?
Code example as below:

var start = scene2.startPosition();
var end =  scene2.duration();
var current = controller.scrollPos();
var remaining = (current - start) - end;

But I found out the calculation itself isn't right. Is there a better/correct way to do it with ScrollMagic?

Catch window resize event to reinitialize scenes

Hey Jan,
I need something to reposition scenes/tweens. I have several Tweens which are added to one pinned ScrollScene. These tweens then get top values by ScrollMagic depending on my window.height. And finally, these values need to be recalculated when resizing the window.

Any ideas? I already tried controller.updateScene(scene, true); and scene.update(); with no effect.

With nice regards,
Kai

$(window) causes issues

Having the default scroll container as $(window) seems to cause issues under certain browsers or using Zepto. I tried overriding it using the options object but it didn't seem to work but when $('body') was the scrollContainer, it seemed to work better.

No scroll for mobile advanced demo if cursor inside setPin

hey,

In your example for mobile support, if the cursor is directly on the blue box and we scroll the page.. nothing happens. The cursor need to be outside the blue box while you scroll.

The problem seems to come from the fixed position and the overflow-y of the container. Do you have any solutions ? I need to do similar effect with full width..

http://janpaepke.github.io/ScrollMagic/examples/expert/mobile_advanced.html

WordPress

I've attempted to use ScrollMagic on a default install of the latest version of WordPress. I've copied a demo into a Page and doesn't work. I included the debugging library but that doesn't show either. The simple tweening example works fine on its own.

I'm guessing there's a simple explanation on how to fix, or why it won't work.

Any thoughts?

"box-sizing: border-box" trap

Caution when using scrollMagic with e.g. Bootstrap. You'll experience some real weird behaviour of scrollMagic. This is due to Bootstrap's box-sizing: border-box. To fix it the naive way just

* {
  .box-sizing(content-box);
}

Hope this saves someone's time.

Disabling on touch/mobile

Hi there - this looks like a really interesting plugin - thanks!!

Having used other scrolling plugins, (including scrollarama) I know that using them on touch screen and mobiles can introduce issues. For my latest project I only need this to run on "desktop".

I know browser sniffing, and touch detection aren't great and I'm not sure that disabling based on screen width is the right way to go.

In your opinion, how would you disable this for "mobile" and touch screen (quotation marks as I realised "mobile" is a term that is hard to define).

Also, is there any documentation as to why this plugin works better on mobile than the old superscrollarama - Does it still involve creating a element to scroll rather than the body?

Much appreciated.

Trying to pin elements, pins in the center of the page

I'm trying to pin a div on my website, do some animations and when the animations are done, it will automatically un-pin and continue scrolling. The problem is though, the div pins right when the top of the div hits the center of the screen instead of pinning at the top of the screen.

This worked fine using superscrollorama, but due to the navigation bar issues, I had to switch to ScrollMagic and I can't figure this out :(

known bug: scrolling mobile without iScroll not working properly

Apparently I broke it with an update.
I'll try to fix it asap.

Project page Link shows 404

http://janpaepke.github.com/ScrollMagic as mentioned in Readme shows only 404 not found.

Tween object's delay not applied when duration 0

Hi, it appears a Tween(Lite/Max) object's delay is not taken into account when the ScrollMagic duration is 0. If a ScrollMagic duration is 0 I would expect the Tween object to run at the offset as if called directly which would delay if a delay was specified.

Updating from Superscrollorama, scenes are a very logical improvement!

Destroy/remove all for mobile

Hi Jan, I'm wondering, is there a simple way to remove all of the animations based on screen size? Basically anything below 1024px we just want to have the images and no animation. I'm trying to avoid having a separate mobile site. Any help would be much appreciated! Thanks!

reverse tween direction on scroll

Hello,
I finally figured out how to use ScrollMagic how I want, but there is one thing I can not figure out.

And that is to reverse the tween. I want the element to go to 32px when scrolling up and back up, off screen, when scrolling down.
It is fixed, so a lesser and lesser negative top value as it scrolls down should work.

But how do I achieve this?

Here is a JSFiddle that shows what I have accomplished so far: http://jsfiddle.net/rYh7J/13/

I'd greatly appreciate all and any help.

Thanks in Advance!

Is there a way to change the trigger location?

If you look on this example:

http://janpaepke.github.io/ScrollMagic/examples/basic/simple_tweening.html

You can see the trigger is in a fixed position on the right hand side. It looks to be dead center vertically. Now, when it hits the various start points with IDs "#trigger1" and "trigger2", the animations are triggered and they play out either with a duration or not.

The question is, can you change the spot of the actual trigger? Not the start points where the animations are triggered, but the trigger itself? I remember on Super Scrollorama, there was a way to have the trigger at the top or in the middle. Any tweak-ability here? Or should I just move my start points to compensate?

The only problem I have with the latter is sometimes code gets very un-sematic because you have classes/IDs that do nothing but trigger an animation.

function add in README

Hello!

I tried to use the same snippet you wrote in the README file and I saw an error in my javascript console:

new ScrollMagic().add(new ScrollScene({duration: 200}));

// => TypeError: Object [object Object] has no method 'add'

I checked if I included TweenMax dependency and I actually did. Then I looked for the add function in the source code but I didn't see any add in it. I guess the function is now called addScene. Am I right?

ANNOUNCEMENT: ScrollMagic Support

Hi all!

I am in the middle of a move right now (country to country) and will understandably be quite busy in the upcoming days.
Please feel free to post any and all questions or issues but I hope you understand that I will not be able to read or answer them before March 22nd.

thanks and regards,
Jan

Tween between two classes, but in an if statement not with a trigger

I think this script is exactly what I'm looking for and am so thankful for it.

I want to tween from one class to another class as scrolling happens if a condition is true instead of when a trigger element hits a position.

Simplified, the condition is when scrolling up. So I want to do when scrolling up, tween from class A to class B and then else tween from B to A as scrolling is happening.

Is this possible?

I would greatly appreciate any and all help!

Help with: Uncaught ReferenceError: ScrollMagic is not defined

Hi,

I am trying to incorporate some scroll magic animation into the page however the actions are not executing.

When I look in the dev tools I get the message: Uncaught ReferenceError: ScrollMagic is not defined

How to I ensure that scroll magic is defined?

cheers

Toggling tweens on multiple elements

Hey guys,
I have list of element that I want to tween as the user scrolls past (it's a simple unordered list with a collection of list items). As the user scrolls past an item I want it to slide right, then as they leave that item and scroll to the next item I would like it to slide left (essentially toggling the item that is to the right). I can't for the life of me figure out how to accomplish this using ScrollMagic. I have tried creating a single scene for each element in the list with the correct Tween to slide it right, then adding a listener for the "on leave" event and adding a new tween to the scene that animates the element back to it's original position, but this is not working as I might expect.

Any pointer on how to accomplish this?

Thanks!

-Kyle

ScrollMagic and Zurb Foundation Topbar

Hi!

just found ScrollMagic and testing it. I have a page based on Foundation. I start simple and try to make my main-navigation sticky (pin it) on the top of the screen after a header-space is scrolled out of view.

However the javascript seems to work but the pin-spacer seems to have wrong calculations (perhaps similar issues as with bootstrap). The div with my navigation shrinks as soon as it is pinned.

Of course I'm using latest version.

If have prepared a small demonstration with simplified markup. http://jsfiddle.net/2KeRS/14/ (for better results make sure your browser is wide enough to not show the mobile-version). Use http://fiddle.jshell.net/2KeRS/14/show/# to only show the result-frame (easier to debug).

Any ideas what to do?

Thx and best regards
Tim

Is ScrollMagic on cdnjs? https://github.com/cdnjs/cdnjs

I'm trying to create a codepen with ScrollMagic to illustrate a bug for a future bug report I'm seeing. However I do not see ScrollMagic on cdnjs. Not sure how I can do a codepen for scrollmagic if I don't have it hosted somewhere.

pushFollowers: false not working for me

Hi I am trying to pin a title screen and have it unpin once the first frame is complete but when I try to use pushFollowers: false, I get this console error:

21:53:35:988 (ScrollScene) -> WARNING: Unknown option "pushFollowers"

Any idea what else might cause this issue? I'm not getting any other errors and my other tweens are working fine. Any help would be much appreciated!

Please make the code in the examples selectable

Thanks,
Patrick

P.S. Great Library

Parallax causing container and scrollbar resize causes flicker explosion

http://cdpn.io/fzntK

This codepen illustrates that when doing a horizontal parallax effect the scrollbar gets resized while scrolling and thus when you get to the end it (the browser & scrollmagic) gets freaked out.

Notice what happens when you scroll into the third scene about 1/4 the way through the third scene.

I'm not sure how to fix this. Any ideas?

Thanks.

Display/Hide Issue when scrolling too fast

Hi Janpaepke,
First I have to thank you for providing this great tool for everyone.

I have a complicated one page project and everything works fine except when I scroll too fast, some animations seem won't be completed. Here is my testing site: http://case.wikirex.com/mark/

As you can see, many text boxes appear one by one. If I scroll faster or click the menu on the right to cross a large distance, all text boxes are mess-up and won't disappear.

Could you please give some advises? Any idea will be appreciated. Thanks.

Best Regards,
Rex

Delayed scrolling effect

Hello,

First of all thank you for your hard work on this library. It is really usefull!
I want to make a scrolling effect like the one in this image

Is it possible with ScrollMagic? Could you give me some guides?

Thanks

color

Could you add in the examples section how to morph colors as you scroll?
Thanks for this, its awesome.

Optimizing animations for better performance

Hi Jan,

First of all, thanks for all your hard work on this library. It's a superb improvement over its predecesor. Great job!

That being said, I have a quick question: is there a way to optimize the performance of the library by, say, disabling animations once they have left the viewport?

In my current project, I have a long scrolling site with several "pinned" elements that trigger a simple fade-in animation for some text. It's certainly pretty simple, but as soon as the user starts scrolling, the CPU usage by the browser(s) (Chrome and FF on Mac OSX Mavericks) goes through the roof.

Using your debug tools (which are super helpful, btw), I noticed that the pinned objects are being updated every time the scroll event is triggered, which seems to be pretty CPU intensive. Based on that, is there a way to disable them once they become unpinned, and re-enable them when they become pinned?

Sorry about the long explanation, but I'd love to give your library a final shot before moving to a different solution.

Thank you, and again, thanks for your hard work!

Vq.

Problem with pinned elements / fixed position

Hey there!
I have a problem with pinned elements. There are 3 elements on the left side of my page wrapper (960 centered), pinned on each section (overlapping at the end of the page). Thats working nicely, but if I resize the window, the elements staying on there position. At the next trigger, the following elements are positioned correct.
I tried absolute and relative position, but when pinned and position fixed, they are not relative to the page wrapper.
Do you have any ideas / advises for me?
Can I reposition on resize or something?

Thanks!

controller has no object destroy

if ($("#destroyController").prop("checked")) {
controller.destroy(reset);
controller = null;

TypeError: Object [object Object] has no method 'destroy'

Love your Library.. please keep developing it!

Unsure how to scroll full-size windows and pin them

I was trying to scroll a div (for the last 14 hours :/). I am unable how to use scrollmagic to tween and pin a fullscreen div. For instance, each view is a background image with the width set to 100% and height is dynamically sized - the image is full width using background cover. For instance, what trigger element do I use to trigger these elements? If each view is has it's own scene, and each view has it's own controller, and basically the first image, I want to pin immediately - how do I go about doing this? I was using the trigger as the container view itself, but then when I went to pin the elements top position changed, making it go off the screen. I tried setting offset, with no real success either.

I know this probably isn't clear, but I'm not sure from the examples how to achieve this.

Thanks

Element pinned and unpinned: jumping issue

Hello,

First of all, thank you for this great plugin, which I'm still learning to use.

I'm trying to pin an unpin an element several times (as in one of the examples), but for an unknow reason, the first "pin/unpin" is fine, but the others make the element jump...
It'll be more understandable with an example: www.debie.com/clients/_lab/scrollmagic/pins.html

Thanks in advance for your help,
François

Autoplay vs. duration

Hey, I love learning this Greensock library so far and have a couple questions...

I've figured out how to build tweens and autoplay through all of my interactions, but haven't nailed down how to pin a section and define durations so a user can scroll themselves.

Right now, from what I've tried no matter which container I pin, as I scroll through, it's glitchy and flickers as I scroll down the page. My container is position fixed (obviously) and my scene is positioned absolutely.

I understand that the duration is how many pixels a user scrolls on a tween. So I'm basically defining a duration on my scene, and a duration on each tween that adds up to my scene duration? Is that an oversimplification?

Still wrapping my head around these concepts, thanks for ScrollMagic and for reading this.

More documentation/examples for mobile?

Hi Jan, I'm having a hard time getting anything to work right on mobile. When I don't use the container method, I can at least get animations to work but not correctly. When I use the container method, nothing happens. No animations, no errors. I'm sure that I'm doing something wrong but can't figure out what. I basically copied what you had in your "Mobile Advanced" example. Is there specific CSS that is necessary for this to work? Do you have any other examples, maybe with multiple animations and/or pins? Thanks in advance for any help you can provide!

Functions for offset values

Is there a way for Scroll Magic to allow for functions to be used for calculation of offsets etc. So it can be updated dynamically without me having to update them manually using a onResize even listener.

So I could do this

scene.offset( function () {

return $('.bobo').outerHeight();
});

Multiple events happen but events aren't specific to their animations

Notice,

These events all happen simultaneously, while my pinning is correct, my scroll duration is 0, and the elements are animating in, but notice, the events all come piled up at the same time. Without being able to have separate events, I can't determine the state of my animation. Any ideas here? I am creating multiple scenes for multiple divs on top of each each other, each unique scenes with unique controllers.

Thanks,

[div#home-page-panel-0.home-page-panel-view, jquery: "1.11.0", constructor: function, selector: "", toArray: function, get: function…]

jQuery.Event {type: "leave", scrollDirection: "FORWARD", state: "AFTER", target: ScrollScene, timeStamp: 1395060854470…}
home_page_base_view.coffee:51
[div#home-page-panel-1.home-page-panel-view, jquery: "1.11.0", constructor: function, selector: "", toArray: function, get: function…]

jQuery.Event {type: "leave", scrollDirection: "FORWARD", state: "AFTER", target: ScrollScene, timeStamp: 1395060854470…}
home_page_base_view.coffee:51
[div#home-page-panel-2.home-page-panel-view, jquery: "1.11.0", constructor: function, selector: "", toArray: function, get: function…]

jQuery.Event {type: "leave", scrollDirection: "FORWARD", state: "AFTER", target: ScrollScene, timeStamp: 1395060854470…}
home_page_base_view.coffee:51
[div#home-page-panel-3.home-page-column-view, jquery: "1.11.0", constructor: function, selector: "", toArray: function, get: function…]

jQuery.Event {type: "leave", scrollDirection: "FORWARD", state: "AFTER", target: ScrollScene, timeStamp: 1395060854470…}
home_page_base_view.coffee:51
[div#home-page-panel-4.home-page-about-view, jquery: "1.11.0", constructor: function, selector: "", toArray: function, get: function…]

jQuery.Event {type: "leave", scrollDirection: "FORWARD", state: "AFTER", target: ScrollScene, timeStamp: 1395060854470…}

Examples don't work... why?

I'm getting an error that the example pages cannot be found. Can anyone help?

Manipulating tweens with startAt values a.k.a TweenMax.fromTo()

Hi, me again!

It would seem that updating the values of a tween and then calling setTween() (as per the manipulating tweens demo) doesn't correctly update the scene, in the case of:

• fromTo() tweens
• In a scene that hasn't yet begun.

I believe fromTo() is roughly a shorthand for setting the startAt options in TweenMax.

Prepping an example in jsfiddle was going to take a little while, so I just hacked a clone of the demo which you can find here. The tween manipulation works fine during and post scene, but not before.

I'm running into this because I'm doing responsive handling to change the startAt values of some parallax tweens on window resize (if you're interested, I hacked another quick example of that here (ignore the fact that I'm not debouncing). My goal there is that the parallax happens in proportion to their size, even after resize.

Anywho, in setTween() you call updateTweenProgress() which I believe is where tweening to the new options is normally handled (at least by the looks).

If I'm right, then it would appear the problem lies in updateTweenProgress() around this line:

} else if (progress != _tween.progress()) { // do we even need to update the progress?

In the demo we set the tween progress to 0 before this code runs, so _tween.progress() is 0. If the scene has begun or is finished, progress is either a fraction or 1 - so we end up progressing the tween to the right place:

// just hard set it
_tween.progress(progress).pause();

But if the animation hasn't begun yet, both are 0 and we do nothing. Which is fine in the case where we're only tweening to something, such as in the original example I hacked. But it should probably also work when we're manipulating the startFrom values.

Not 100% sure what the fix would be here… but I'm happy to try and help with a pull request if you can point me in the right direction!

How can I overlap my animation?

First I want to say thank you for creating such a wonderful plugin. I am having a lot of fun using and learning it.

What I am trying to accomplish is to have both animations in my timeline overlap when I scroll. I have a bunch of divs with the same class and style displayed inline block so it is like a train. Like the stagger animation in your example. The div on the far left also has a div ID.

Right now what is happening is that when I scroll It will play the first animation as I scroll and when the end of the first animation is reached (stagger) then the second animation starts playing.

I have tried adding a label to both of them and changing the time to the second one to -=.75 etc to get it to overlap but it still plays sequentially. How can I get both animations to overlap each other as I am scrolling?

seven is the class name for the div boxes and #box7 is the id for the box on the far left that also has a class name of seven.

 var tween = new TimelineMax();
    tween.add(
        TweenMax.staggerFromTo(".seven", 2, {left: 700}, {left: 0, color:"blue", ease:Back.easeOut}, 0.15)
    );

    tween.add(
        TweenMax.to("#box7", 2, {backgroundColor:"black", width:"+=400px", ease: Back.easeOut})
    );

    // build scene
    var scene = new ScrollScene({triggerElement: "#box7", duration:200, offset: -120})
                    .setTween(tween)
                    .addTo(controller);

Issues with scrolling activation with divs within divs

So I have a website, where when you press on one of the buttons the main elements fade out, and another container div (with another container div that contains the div I want to animated with scrolling) fades in. I declared a separate controller with the property container:(div)... Which the syntax I have verified with the examples. I am pretty sure that the div (it's a fullscreen div) that's scrolling is the same div I have set in the container:div section. I animated it with a TweenMax.from, and it appears static when I load the page. I have rewrote it, and scoured it, and compared it to the example and I have ZERO idea why it isn't working. I've also looked all around the internet for an answer but I just can't find one. My full website code is here: https://www.dropbox.com/s/3qxmzhiz43ty0yp/ScienceFair%20Website.zip . And just in case you're wondering, this is a website for my science fair project :-) Have a good day, and thanks for reading this!

tween.js version?

It's so much more light and yet powerful, while TweenLite or TweenMax seem to be too much more for most of us.

Go to a specific scene

Hi, is there an easy way for scrolling to a scene?

I have a website with navigation menu, when user clicked on the nav, it will scroll the website to a scene. Possible?

Thanks.

Problem with position:fixen object in container using mouse wheel to scroll

Hi
I have this problem with mouse wheel when im using div container. container is set to scroll horizontaly and when i set pin to some object inside of container its position is changed to fixed and when my mouse is over this object while scrolling it stops. Can you help me with this?