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.
410 questions
14
votes
2 answers

Next.js (React) & ScrollMagic

I would like to implement an animation to fade sections, like in this example, into my application. Therefore I've had a look at fullPage.js. However, since I need to integrate it into a Next.js React app with server-side rendering I can't use it…
dude
  • 4,522
  • 9
  • 44
  • 77
13
votes
1 answer

Measure the length of an svg path?

I am playing with Scrollmagic and want to use the effect here: http://scrollmagic.io/examples/advanced/svg_drawing.html I created a squiggle svg to test it out and need to insert the length of the path in to stroke-dasharray: 2000px;…
R Reveley
  • 1,399
  • 3
  • 13
  • 32
12
votes
3 answers

Parallax content in a horizontal ScrollMagic container per slide is stuttered

I have a pinned slider that goes horizontally when you get to it by updating the X value of the inner wrapper. This part works great. However, for each individual slide, I would then like to have a parallax effect for the text (to go slower as you…
Michael Giovanni Pumo
  • 12,838
  • 15
  • 83
  • 125
12
votes
4 answers

How To Use ScrollMagic with GSAP and Webpack

In order to use ScrollMagic with GSAP, you need to load the animation.gsap.js plugin. With Webpack you would do something like this to accomplish that (assuming you use the CommonJS syntax and installed everything with npm): var TweenMax =…
medoingthings
  • 2,637
  • 2
  • 14
  • 17
6
votes
2 answers

animated scrolling script prevents local anchor positions to be accessed from external links

I have a onepager site where I use scrollmagic plus all its necessary plugins/libraries (and jQuery) for different effects where animation, pinning, fading processes etc. are triggered by scroll positions. I also use it for animated scrolling to…
Johannes
  • 53,485
  • 15
  • 52
  • 104
6
votes
2 answers

use the same class to animate on view with scrollmagic

I am pretty new to scrollmagic and i am looking to use a single class multiple times throughout a page to animate when it comes into view. Is this possible? see pen Any pointers welcome. $(function() { controller = new ScrollMagic(); var…
hamish mckay
  • 61
  • 1
  • 2
5
votes
1 answer

ScrollMagic update trigger positions on resize

On my website the ScrollMagic scene trigger hook positions are stored in an array slideOffsets = [] which is populated on initialisation using var scene; for (var i=0; i
peterxz
  • 750
  • 5
  • 16
5
votes
1 answer

Scrollmagic TimelineMax not animating

I'm trying to figure out how to use TimelineMax with Scrollmagic. The problem is easy to explain. I have similar DOM elements, like particles that have to move slowly than scrolling speed. This first implementation is WORKING (no Timeline) var…
Pegui
  • 53
  • 4
5
votes
1 answer

scrollmagic not responding to the trigger element

I have problems with the ScrollMagic. It's not responding at all on the trigger element. Below I'll provide with the code: the CSS: .container { height: 3000px; } #trigger { position: relative; top: 300px; } .katrori { opacity:…
Ilir Bajrami
  • 99
  • 1
  • 13
5
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

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
  • 667
  • 9
  • 25
4
votes
2 answers

How to include GreenSock plugin for ScrollMagic in a ReactJS environment?

How do I include the Greensock plugin for ScrollMagic in my ReactJS project? The authors of ScrollMagic made plugins to incorporate libraries like GreenSock and Velocity. These work great when you simply include them in your head of your html doc…
John
  • 28,573
  • 67
  • 217
  • 373
4
votes
1 answer

Angular 2/4 - How to install ScrollMagic with Gsap?

I have a simple question: How to use properly in an angular-cli application, ScrollMagic and Gsap? What I have done: npm install ScrollMagic npm install gsap In angular-cli.json: "scripts": [ …
Wandrille
  • 4,576
  • 2
  • 14
  • 36
4
votes
2 answers

Scrollmagic duration

Is there a way to set the scrollmagic duration on a scene as long as the height of the scene? I want to use the class toggles functionality and certain scenes are heigher than the viewport height.
I'm 400px in…
Sam
  • 430
  • 8
  • 18
4
votes
2 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,241
  • 3
  • 19
  • 43
1
2 3
27 28