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
1
vote
1 answer

ScrollMagic - Section Wipes - only works right after scrolling down and then up

I'm using ScrollMagic on my site and I want it to work like this MaterializeCSS Startup Theme My problem is, that after the initial load the different containers are overlapping. After I scroll down completely and the up again, it works fine. To…
Schlodi
  • 149
  • 1
  • 15
1
vote
1 answer

Scroll Magic fade in up

I have a pretty simple set up

Dummy section

Some…

katie hudson
  • 2,765
  • 13
  • 50
  • 93
1
vote
0 answers

scrollmagic with fixed positioned backgrounds

My problem is, I would like to make a nice site with scrollmagic lib with fixed positioned background. Is there a good way, to achieve it? Right now i have a fixed positioned background wrapper with 2 layers at the "back" (like z-index -1), and a…
cs.matyi
  • 1,204
  • 1
  • 11
  • 21
1
vote
1 answer

How to invoke a function at a trigger point?

When a trigger point is reached, I just want to call a function or run a few statements to do something, which has nothing to do with interface. Here is how I am doing now for this purpose: var scene = new ScrollMagic.Scene({triggerElement:…
curious1
  • 14,155
  • 37
  • 130
  • 231
1
vote
1 answer

Glitching/jumping/crashing on triggers SmoothScroll+ScrollMagic+GSAP

There is no problem to connect ScrollMagic with GSAP - it works well. But what if I need to make my mouse scroll smooth? I add to my project thaat smooth scrolling…
Artimal
  • 651
  • 7
  • 24
1
vote
1 answer

ScrollMagic & Requirejs error

I need add scrollmagic.js whit requirejs on my project My structure file is /js /app main.js /lib debug.addIndicators.js jquery.js require.js ScrollMagic.js app.js my app.js is requirejs.config({ …
yavonz15
  • 178
  • 6
1
vote
0 answers

Scrollmagic vs Skrollr

I am trying to learn ScrollMagic library and to use it to achieve the same effects as what skrollr can do. One example I have been working on is having a menu bar that initially appears at the bottom of the page when you first load the application,…
mls3590712
  • 750
  • 1
  • 6
  • 20
1
vote
1 answer

How to pin and overlap multiple elements with ScrollMagic?

I have 9 slides with 3 elements inside, animated with Greensock and Scrollmagic. Currently, the page is very long and if I use setPin() all elements are going crazy. Here is the example: https://codepen.io/htmltuts/pen/prVVwK What I want is that…
Dan
  • 715
  • 8
  • 12
1
vote
0 answers

ScrollMagic bugs setPin error

I have bugs with Scroll Magic, I have this code: PageScroll Test