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
4
votes
3 answers

Scrollmagic add end trigger

I'm using ScrollMagic for the first time and as far as I got I understood how to trigger my animation based on starting element and duration Isn't possible to set a end trigger instead of duration? var smcontroller = new…
al404IT
  • 1,380
  • 3
  • 21
  • 54
4
votes
2 answers

Setting up ScrollMagic plugin

I am currently learning JavaScript and jQuery and would like to start using ScrollMagic plugin. Unfortunately I am stuck on the first hurdle- I've spent hours on this, following various tutorials online, but I just cannot get the plugin to…
i76
  • 117
  • 1
  • 2
  • 11
4
votes
2 answers

Meteor.js + ScrollMagic TweenMax.to

Trying to get Meteor template.rendered working for ScrollMagic this is the code i wish to get it working. if (Meteor.isClient) { Meteor.startup(function () { scrollMagicController = new ScrollMagic(); …
4
votes
1 answer

ScrollMagic duration without padding

This is the rough structure of my website:
I'm using a ScrollMagic scene to pin my header until section2 gets to the top of the window. To achieve that I set the duration of the scene to the…
sam
  • 1,711
  • 1
  • 17
  • 24
4
votes
1 answer

Tweenmax starts animation without waiting for ScrollMagic

I'm trying to get scrollmagic to trigger a TweenMax animation, but the animation starts without waiting for the scroll trigger to be hit. Am I missing something here? $(document).ready(function($) { var controller = new ScrollMagic(); var tween…
jshou
  • 672
  • 4
  • 19
4
votes
1 answer

Initiating tween after completion of previous tween. - Greensock / ScrollMagic

Trying to use GreenSock / ScrollMagic JS to animate a div on a page. I want to fire a second animation on my animation box after the first tween has completed. So move the box down 300px, then move it left 300px. How would I go about adding a tween…
DIM3NSION
  • 1,681
  • 5
  • 20
  • 38
3
votes
0 answers

scroll magic Pin() creating gap

I'm trying to have a parallax effect on my website using ScrollMagic (like this example: http://scrollmagic.io/examples/basic/section_wipes_natural.html ) my HTML code structure is like:
3
votes
1 answer

How can I show the footer only when I reach to the end of a page after scrolling down with ScrollMagic?

It looks like there are several questions on StackOverflow similar to this question. However, I tried several methods and nothing worked for me. :( Hello! I'm currently using a MVC model in PHP. I'm using GSAP & ScrollMagic for this…
Lim
  • 753
  • 14
  • 31
3
votes
1 answer

pin element with scrollmagic related to div

I have created a simple animation with ScrollMagic: a wheel rotating while horizontally scrolling the page. The problem is that when scrolling the window page the animation appears smooth, while when scrolling just the div inside which the element…
Floriano
  • 93
  • 2
  • 6
3
votes
1 answer

Nuxtjs with scrollmagic gives me "window is not defined"

I want to use scrollmagic with nuxtjs. I installed scrollmagic via npm. npm install scrollmagic In my nuxt.config.js file i added build: { vendor: ['scrollmagic'] }, And in my pages/index.vue file i simply imported it. import ScrollMagic…
Gregor Voinov
  • 2,203
  • 7
  • 34
  • 52
3
votes
1 answer

scrollmagic and velocityjs

I'm trying to animate a div at some point with scrollmagic and velocity.js It gives me an error supplied argument of 'addTo()' is not a valid ScrollMagic Controller so the velocity animation takes place before it reach the trigger but It seems to me…
sonia maklouf
  • 2,713
  • 4
  • 18
  • 28
3
votes
0 answers

Scrollmagic pin

I have a bootstrap row, that contains a table__tabs and a table__info, and looks like this:
...
...
What I wanted to do…
mdmb
  • 4,833
  • 7
  • 42
  • 90
3
votes
2 answers

.setClassToggle in ScrollMagic does not remove class when scrolling down

So i've been using ScrollMagic.js with GSAP.js and using the .setClassToggle for a side navigation active state as you scroll down. It adds the 'active' class, but does not remove the previous one, until you scroll up again, then it removes it. But…
C22_Gh02t
  • 187
  • 1
  • 13
3
votes
0 answers

ScrollMagic. Starting point of the scene is "moving"!

I am trying to make a responsive svg animation on scrolling using the scrollMagic and it works well in Chrome and Opera, however thereis some bug in Firefox, Edge and IE9. The problem with Firefox and Edge is when the window resized till 850px or…
3
votes
0 answers

How to keep menu active status while scrolling between section

The active menu status not working while scrolling between
. Is there any option in scrollMagic to set active status all the time while scrolling based on which
is .setPin() ? var controller = new ScrollMagic.Controller({ …
Mo.
  • 26,306
  • 36
  • 159
  • 225
1
2
3
27 28