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

how to set multiple setClassToggle to the same trigger ScrollMagic

I'm working with the ScrollMagic Library for a project. How can I set multiple setClassToggle in the same trigger scene? My Code: // move tree 1 to the left var Waldscene01 = new ScrollMagic.Scene ({ triggerElement: '.scene01-wald', …
Jasmin
  • 69
  • 1
  • 9
1
vote
1 answer

GSAP and ScrollMagic: Padding top and pin spacer

I am using GSAP v3 with ScrollMagic v2.0.7. The problem I face is that after the animations are finished and I scroll up (reverse: false), it correctly registers that I don't want to execute the animations again on reverse, but it creates a…
christostsang
  • 1,701
  • 3
  • 27
  • 46
1
vote
1 answer

Scrollmagic with Gatsby js and window undefined upon deploy

My Gatsby site can't be deployed to Netlify because of a WebpackError: ReferenceError: window is not defined I've tried: Wrapping return statements in if(window !== undefined) checks which didn't work Putting a require statement in my index.js: if…
flooz
  • 143
  • 1
  • 4
1
vote
0 answers

ScrollMagic parallax effect jerky on all browsers

I have a problem using ScrollMagic to do parallax scrolling: When scrolling, the background images are jerky instead of scrolling smoothly. The site in question is this: https://camilledevillers.fr/site.html I have noted the problem on all the…
David M.
  • 11
  • 1
1
vote
0 answers

Dashed Line SVG Animation

I'm newer to working with SVG animations so I apologize in advanced if there is a straightforward answer to this. With a combination of utilizing Scrollmajic.js and GASP I was able to get the SVG to animate when the user scrolls to a specific…
Nick
  • 1,471
  • 2
  • 21
  • 35
1
vote
0 answers

with fast scroll, twentmax animations shot with scrollmagic do not work correctly

I have a problem, I am making a page with fullpage.js, I am launching animations with tweenLite every time I reach a section with Scrollmagic. The problem is the following: If I move in the normal order of the sections, one by one, the animations…
1
vote
0 answers

Set multiple setTween Elements for scrolling in ScrollMagic

my problem is that i use .setTween wrong. It uses just the second .setTween Element. In my case the #identity ID. // init controller var controller = new ScrollMagic.Controller(); // animations var headerpic = TweenMax.to("#headerpic", 1, {opacity:…
Daniel
  • 113
  • 1
  • 7
1
vote
0 answers

iOS: Animated scroll position jumps on long touch gestures

Based on TweenMax, the ScrollTo Plugin and ScrollMagic (this is probably not where the problem came from): I wanna have a hero section on top of a page, only tweening downwards if the user is scrolling from the very beginning. Everything works as…
Jakob Grommas
  • 31
  • 1
  • 3
1
vote
1 answer

Horizontal scroll with scrollmagic and dynamic child widths

I am playing with scrollmagic. I would like to include horizontal scrolling. The child elements must be able to have different widths. I can not find anything that suits my research. Has anyone ever implemented that or possibly resources for me? I…
pkberlin
  • 812
  • 1
  • 13
  • 31
1
vote
1 answer

ScrollMagic + SmoothScroll stuttering

So I've created a smooth scroll effect on my website, works nice, but I'm having an issue with Scrollmagic. When scrolling down, I'm translating elements, but it stutters. A lot. When I disable my smooth scroll script, everything works fine again.…
Perdixo
  • 1,021
  • 3
  • 15
  • 31
1
vote
0 answers

How to pin multiple elements (inside each other) with not 100vh?

I'm trying to achieve a Site with ScrollMagic. Example Code .section { height: calc(100vh - 120px); max-height: 800px; overflow: hidden; } .section:first-child { background: yellow; } .section:last-child { background: green; } .section…
frank allen
  • 35
  • 2
  • 8
1
vote
1 answer

Scrollmagic setPin Method Causes Link issues in Create-react-app

I'm using Scrollmagic and GSAP in my create-react-app and pinning a section while child elements are animated on scroll. I've achieved this HOWEVER anytime I click on my nav links (using Reach Router) it goes to an empty/white page. When inspecting…
Eric Nguyen
  • 926
  • 3
  • 15
  • 37
1
vote
0 answers

How to use scroll magic to scroll snap and be full screen?

I want to create a section similar to the “App timers” section on this page(it's towards the bottom): https://www.android.com/versions/pie-9-0/. I can only have one section like this on my page with the rest being normal scroll. I see that they…
1
vote
2 answers

How to install ScrollMagic and GSAP into Angular 7

I'm currently struggling to get ScrollMagic to fully work on Angular 7. I've installed GSAP and ScrollMagic, but in order for ScrollMagic to work it also needs the animation.gsap.js plugin. I've imported everything and all the imports are working…
Mark Syrzysko
  • 31
  • 1
  • 5
1
vote
1 answer

Play audio element when scrolling using ScrollMagic.js

I want to play and stop audio when entering/leaving a scene with ScrollMagic.js. It throw 'Uncaught (in promise) DOMException' in Chrome. What is the problem? I have html structure like below. I want to play audio automatically when entering each…
Hary Kamaro
  • 121
  • 1
  • 1
  • 10