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
2
votes
0 answers

random safari crashes while using requirejs with fullpage.js and scrollmagic

I’m trying to get a website working with requirejs, based on the use-init boilerplate. It works fine in most systems and in most of the browsers. But it fails (combined with ‘scrollmagic’, ‘fullpage.js’ and other script) in safari on random system…
2
votes
1 answer

Tweening opacity of text box with Scrollmagic

I am attempting to make a psuedo-parallax site. I am using the Scrollmagic jquery plugin. My background animations are working fine, but I am having issues with the first text box (living in the grey bar). I have it set to start at opacity:1 and…
royalenfield
  • 90
  • 1
  • 11
2
votes
1 answer

Managing complex ScrollMagic code

I'm new to ScrollMagic and I'm trying to figure out things. I'm working on a site with quite complex animations and I haven't found any tutorial or example on writing effective ScrollMagic code. I'm not a programmer and have just a basic…
Péter Csaba
  • 43
  • 2
  • 5
2
votes
1 answer

Overwriting global scene options in ScrollMagic

I'm trying to build a site with ScrollMagic, and I have a problem: I define the reverse option to be false globally and I'm seemingly not able to overwrite this option at a specific scene. I have several scenes and only need one or two scenes to…
Péter Csaba
  • 43
  • 2
  • 5
2
votes
1 answer

ScrollMagic animating FontSize in EM

I'm using ScrollMagic in a site and I have a problem when I try to animate a font-size in em and not in pixels. So, this is an example with the ems: http://jsfiddle.net/41h1nfxo/7/ And this is another one with px: http://jsfiddle.net/jtdm0o6q/2/ As…
Antonio Pitasi
  • 115
  • 1
  • 2
  • 8
2
votes
1 answer

scrollmagic tweens animation

I previously used superscrollorama and i started to use scrollmagic but i cant manage to get some divs properly animated. The first 2 divs are fine but the last two, once i scroll down, doesn't animate. also i would like to add a little offset to…
manny999
  • 37
  • 7
1
vote
0 answers

I want to create path for different letters in svg image

I've recently come across the ScrollMagic library. And I'm trying to recreate thier signature animation on scroll (link :- http://scrollmagic.io/examples/advanced/svg_drawing.html ). I want to add other alphabet in the svg using the paths . I've…
anurag
  • 11
  • 2
1
vote
0 answers

ScrollMagic and Scroll Snap Aign bugged

After creating a page split into two parts like in this video https://www.youtube.com/watch?v=jvbL-VqACyM, I added scroll-snap-type: y mandatory; for the page to automatically scroll to a given section. The problem is that when it scrolls to the…
Uncode
  • 11
  • 1
1
vote
0 answers

ScrollMagic on position absolute only works when indicators are enabled

My goal is to create an absolutely positioned div as the background of the website and the parent of the ScrollMagic scene. By doing this, the title and other content can appear above the scrolling/animated background. However, I found that when…
Anchey Peng
  • 71
  • 1
  • 3
1
vote
0 answers

Webpack & Scrollmagic - debug.addIndicators not available

I use scrollmagic in a webpack (v4) project. it works fine, but when i want to use "debug.addIndicators" in the Scrollmagic.Scene() i get an error: What is the mistake here? My imports: import * as ScrollMagic from 'scrollmagic'; import {…
pkberlin
  • 812
  • 1
  • 13
  • 31
1
vote
1 answer

Controlling HTML5 video with scrollMagic, why stuttured animation / droped frames?

Hey SO members, I want to play back and forth a HTML5 video along with the scroll. The animation controls the video frame by frame regarding scroll amount. I coded (it's lightweight and very simple) this using scrollMagic. The embedded video are…
Yumigo
  • 45
  • 4
1
vote
1 answer

Scrollmagic. Need make navigation links. How scroll to scene progress?

I need to make 4 navigation links for 4 sections. The sections show on scroll by scrollmagic. There is a link for example code. How scroll to scene progress?
manwithawp
  • 11
  • 2
1
vote
1 answer

in scrollmagic, how would I pin a scene, have an animation take place in that scene, then have the next scene scroll over it?

I've successfully pinned a screen in ScrollMagic and had a mask over the scene fade up in opacity. But the scene won't stay pinned while the next screen scrolls up. I want the first scene to do its animation and stay there, then the second scene…
LauraNMS
  • 2,720
  • 7
  • 39
  • 73
1
vote
1 answer

Scrollmagic video animation in webpack (BigCommerce)

I am trying to achieve a video animation with scrollmagic. Desired outcome is that, the video plays based on the user scroll position. export default function magic() { //MAIN var controller = new ScrollMagic.Controller(); // SceneOne animation …
1
vote
1 answer

Can Svelte be used with ScrollMagic + GSAP

I'm having troubles with getting Svelte to work alongside ScrollMagic & GSAP. I've tried looking into it all day and still can't find a solution. Does it even work with Svelte and is there any Svelte & ScrollMagic templates out there? Thanks.
Alex
  • 23
  • 5