Questions tagged [scrollmagic]

ScrollMagic is a jQuery plugin which essentially lets you use the scrollbar like a playback scrub control.

ScrollMagic is a complete rewrite of its predecessor Superscrollorama by John Polacek.

Like Superscrollorama it relies on the Greensock Animation Platform (GSAP) to build animations, but was developed with specific regard to former shortcomings.

The major perks of using ScrollMagic include:

  • optimized performance
  • flexibility
  • mobile compatibility
  • event management
  • ready for responsive webdesign
  • object oriented programming and object chaining
  • readable, centralized code and intuitive development
  • support for both scroll directions (even different on one page)
  • support for scrolling inside div containers (even multiple on one page)
  • extensive debugging and logging capabilities
  • detailed documentation
  • many application examples

ScrollMagic it's the plugin for you, if you want to ...

  • start an animation at a specific scroll position.
  • synchronize an animation to the scrollbar movement.
  • pin an element at a specific scroll position (sticky elements).
  • pin an element for a limited amount of scroll progress (sticky elements).
  • easily add a parallax effect to your website.
  • create an inifinitely scrolling page (ajax load of additional content).
  • call functions when the user hits certain scroll positions or react in any other way to the current scroll position.
413 questions
2
votes
0 answers

'Sliding cards' using ScrollMagic

See here: https://jsfiddle.net/xqxur32w/ I am trying to achieve a 'sliding card' effect where one card will slide up as you scroll down, while the others don't move. As soon as the sliding card hits the top of the view, the following card will start…
2
votes
1 answer

How do I load the indicators plugin?

I have included the scrollmagic NPM package, and from the ScrollMagic docs I get that; "To have access to this extension, please include plugins/debug.addIndicators.js." How do I load the indicators into my project? Here is my code: import…
allegutta
  • 5,626
  • 10
  • 38
  • 56
2
votes
1 answer

scrollMagic - How to scroll to the right place?

There is such a thing. https://jsfiddle.net/j6u6wp7x/1/ var scene; var controller; $(document).ready(function() { parallaxAuto(); $('.viewer__nav div').click(function(event) { var num = $(this).attr('data-num'); if (num ==…
2
votes
0 answers

How to reset plugin?

How to reset values when switching slides? https://jsfiddle.net/j6u6wp7x/ var scene; var controller; $(document).ready(function() { parallaxAuto(); $(".right_arrr").click(function(){ var block = $(this).siblings('.secondSlider'); …
2
votes
0 answers

How to make multiple parallax layers using Scrollmagic?

I'm trying to make use of Scrollmagic library to make parallax sections with two or more layers in them scrolling with different speed. Can't figure it out from examples on the website... What I want is for instance one background layer with sky,…
2
votes
1 answer

Conflicting libraries: Fullpage.js and ScrollMagic issue

So I am making a vertical parallax scrolling website with different sections and I want to navigate between them. So I have chosen ScrollMagic for parallax and fullpage.js for navigating. I have included fullpage.js CSS file in my header.
Andrejs Gubars
  • 584
  • 7
  • 30
2
votes
0 answers

ScrollMagic unpin element from another scene

I have this layout where the red card pins to the top of the screen and the yellow one rolls over it. I need to unpin the red when the bottom edge of the yellow reaches the bottom edge of the red, so it looks like the yellow grabs the red and pulls…
kaldimar
  • 337
  • 3
  • 16
2
votes
1 answer

trouble with scrollmagic section wipe example

Guys I'm using scrollmagic for its parallax section wipe parallax effect. I've been following the demo exactly as found here and nothing I try seems to work. It's driving me crazy I have been at this for hours. What am I leaving out here? Heres a…
2
votes
1 answer

Can't get scrollmagic to swipe up 'natural' in wordpress theme

Running into a problem with the scrollmagic 'section wipes (natural)' activation. What I have in my wordpress theme: functions.php wp_enqueue_script( 'tweenmax' ); wp_enqueue_script( 'scrollMagic' ); wp_enqueue_script( 'scrollMagicPlugin'…
sandovalg
  • 109
  • 13
2
votes
1 answer

ScrollMagic : Add offset to anchor scrolling?

I have an anchor link scrolling feature using ScrollMagic on a website, I'm trying to offset the scrollTo target by 100px along the y-axis, I'm quite new to jquery and am not sure where to put this sort of instruction: 'scrollTop':…
GBin
  • 31
  • 7
2
votes
1 answer

Web workers with OO Javascript, ThreeJS and ScrollMagic

I'm developing a personal website to combine Three.js and ScrollMagic with OO Javascript. As the user scrolls the 3d Objects transform. This all works well but there is a slight performance issue. To improve this I want to move some loop/for…
ewan
  • 454
  • 1
  • 4
  • 9
2
votes
0 answers

Scrollmagic Section Wipes

I need help from anyone who has experience with scrollmagic.js I am trying to create something similar to this: http://work.antonandirene.com/karimrashid/ where the sections overlap as you scroll the page. I am using scrollmagic…
user664546
  • 4,891
  • 4
  • 22
  • 19
2
votes
2 answers

ScrollMagic is not loading properly

I am trying to use this specific animation of ScrollMagic http://janpaepke.github.io/ScrollMagic/examples/advanced/parallax_sections.html But it's very difficult to load the files properly. I am trying to include ScrollMagic, GSAP and GreenSock,…
Victor Ferreira
  • 6,151
  • 13
  • 64
  • 120
2
votes
1 answer

Scrollmagic: Prevent scrolling of page while in scene

I want to use scrollmagic for an effect on my page. My scrollscene is defined and works. Now i want the page to stop scroll while the scene is not finished. I tried to put my scene in a container with overflow-y: scroll; but this died't work on…
Patrick
  • 1,562
  • 1
  • 16
  • 33
2
votes
1 answer

Reuse tweens in different ScrollMagic scenes

I am new to scrollmagic and I want to use same tween on different triggers to avoid code repeting. For example: var controller, firstTween, secondTween; controller = new ScrollMagic; firstTween = TweenMax.to($('body'), .1, { backgroundCoror:…
Khudo Ihor
  • 48
  • 5