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

Pins are jumping when scrolling on full height parallax page on iOS Safari with ScrollMagic

I have a parallax page with full height sections. Safari, Chrome and IE on Desktop the page works perfectly. But when viewed on a iOS device in Safari the next start pin is jumping a fixed size upwards. I am not quite sure how to debug this problem…
JavaCake
  • 4,075
  • 14
  • 62
  • 125
3
votes
1 answer

Scroll Magic JS Margin Issue

It throw this below error ScrollMagic.min.js:3 Uncaught ReferenceError: margins is not defined Scroll not work. If I reduce height it works some time
user2617449
  • 348
  • 3
  • 9
3
votes
1 answer

how to fix the script?

https://jsfiddle.net/fnethLxm/10/ $(document).ready(function() { parallaxAuto() }); function parallaxAuto() { var viewer = document.querySelector('.viewer.active'), frame_count = 5, offset_value = 500; // init controller …
3
votes
1 answer

How to include ‘animation.gsap’ in scrollmagic using bower

TL;DR Has anyone been able to use bower to install ScrollMagic + GSAP animations? I have a website with the full roots stack (that means that I'm using bower for front-end dependency management and gulp to build the website.) and I'm trying to use…
Miquel Adell
  • 1,132
  • 3
  • 11
  • 24
3
votes
3 answers

Use ScrollMagic to detect scroll direction

I'd like to hide my site header when the users scrolls down the page (simple to do in ScrollMagic) - but I'm not sure about is whether I can also use ScrollMagic to detect if the user is scrolling up, and if so to show the header again. The ricky…
danjothebanjo
  • 71
  • 2
  • 6
3
votes
1 answer

ScrollMagic Tween: play animation only once going forward

I want to know how you have the animation only play once going forward when you scroll down and when you scroll up there is no animation. var controller = new ScrollMagic.Controller(); var tween_1 = TweenMax.to('#obj_1', 0.5, { left: '0%',…
ONYX
  • 5,679
  • 15
  • 83
  • 146
3
votes
0 answers

Understanding ScrollMagic

I'm trying to figure out how this ScrollMagic Demo works. Here is the code they I am using from the demo: var controller = new ScrollMagic.Controller({globalSceneOptions: {triggerHook: "onEnter", duration: "200%"}}); // build scenes new…
icekomo
  • 9,328
  • 7
  • 31
  • 59
3
votes
0 answers

ScrollMagic: combining ScrollMagic pins with "scroll easing"

I’m trying to combine ScrollMagic pins (and other coll features) with a plain JavaScript “scroll easing” like in this site: http://www.boy-coy.com/ ("Scroll easing" is achieved by placing all the content in a fixed container, and animating it’s…
Forepick
  • 919
  • 2
  • 11
  • 31
3
votes
0 answers

JavaScript 'clip-mask' equivalent on scroll (GSAP and ScrollMagic available)

The question Is there a way to fade contents out on a gradient similar to clip-mask using JavaScript or jQuery? The problem I've got a fixed header with a transparent background, and a '.png' logo with transparent pieces. I have semi-transparent…
dotZak
  • 105
  • 2
  • 8
3
votes
1 answer

Scrollmagic: issue with animating content inside parallax sections

I'm experimenting with parallax and scrollmagic. In the parallax example from the scrollmagic demo I'm trying to animated content in the first parallax section. Here's a fiddle of my experiment. I can't get the letter A in #box to move how I want…
Agent Zebra
  • 4,410
  • 6
  • 33
  • 66
3
votes
1 answer

GSAP timelineMax error, cannot read property 'repeat' of undefined

I'm trying to create a simple timelineMax with GSAP and scrollMagic, I'm getting the following error. Everything looks right to me so I'm not understanding this error. Uncaught TypeError: Cannot read property 'repeat' of undefined d.to @…
Agent Zebra
  • 4,410
  • 6
  • 33
  • 66
3
votes
1 answer

Scroll Magic Pinning and HTML 5 Video tag

I am using Scroll Magic JS. My goal is to take my HTML5 video (below) and use the pin method to make it stick in the background while text scrolls over the top of it.
3
votes
2 answers

Animating multiple scenes in a sequence with ScrollMagic

I am trying to rebuild this intro effect using ScrollMagic and GSAP: http://airnauts.com Notice how the intro 'slides' (with text) show and dissappear one after another when scrolling. Basically, I have set up a stage controller, a scene (the…
Georgi B. Nikolov
  • 976
  • 2
  • 13
  • 24
3
votes
1 answer

ScrollMagic Pin and reveal issue

I'm trying to pause a picture for some time. After scrolling a little, the picture (part1) should fade out and reveal the underlying picture. After some more scrolling both should scroll out. Im using http://janpaepke.github.io/ScrollMagic but…
Mike
  • 5,416
  • 4
  • 40
  • 73
3
votes
1 answer

I'm using ScrollMagic and Greensock but it gets stuck scrolling

I'm using ScrollMagic and Greensock to create a "scroll to" feature, where the user clicks on a link in a persistent navigation, then the view is scrolled to the specified section down the page (a long page full of content and images). But in…
Justgrant2009
  • 603
  • 1
  • 8
  • 18
1 2
3
27 28