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
16
votes
3 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
  • 5,678
  • 11
  • 54
  • 81
15
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,547
  • 3
  • 14
  • 33
14
votes
5 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,985
  • 3
  • 17
  • 17
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
  • 14,338
  • 18
  • 91
  • 140
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
  • 64,305
  • 18
  • 73
  • 130
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
  • 864
  • 1
  • 6
  • 23
5
votes
1 answer

Multiple tweens in one scene

I'm pretty new to GSAP with Scrollmagic, was trying to do multiple tweens in one scene but couldn't figure out how so I ended up doing 3 scenes like this. // init controller var controller = new ScrollMagic.Controller(); …
Ken Ryan
  • 539
  • 1
  • 10
  • 31
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
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
  • 472
  • 1
  • 8
  • 19
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
  • 119
  • 2
  • 15
4
votes
5 answers

How add ScrollMagic in nuxt project?

I am trying to add ScollMagic in my Nuxt project, I followed this article: https://nuxtjs.org/guide/plugins & I've added ScrollMagic.js in nuxt.config.js and I got this issue: ReferenceError window is not defined. module.exports = { plugins: [ …
Alrick
  • 91
  • 2
  • 10
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
  • 32,403
  • 80
  • 251
  • 422
4
votes
1 answer

Error: Can't resolve 'TweenMax' while using Angular CLI with ScrollMagic and GSAP

I'm trying to integrate Scrollmagic plugin with Angular CLI. However, I'm getting this error: ./~/ScrollMagic/scrollmagic/minified/plugins/animation.gsap.min.js Module not found: Error: Can't resolve 'TweenMax' in …
Rahul Dagli
  • 4,301
  • 15
  • 47
  • 85
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
  • 6,267
  • 3
  • 20
  • 43
1
2 3
27 28