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
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
  • 567
  • 1
  • 3
  • 27
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
  • 95
  • 1
  • 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
  • 3,546
  • 4
  • 25
  • 54
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
  • 3,546
  • 4
  • 25
  • 54
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…
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
  • 4,562
  • 3
  • 31
  • 60
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
  • 573
  • 1
  • 7
  • 18
2
votes
1 answer

ScrollMagic responsive duration / endpoint for a sticky nav?

I'm using Scroll Magic for a sticky side nav. I would like the side nav to STOP right before the next section but as of now the duration endpoint is showing about 200px below where I would want. How do you set a custom endpoint regardless of the…
hendy0817
  • 597
  • 5
  • 21
2
votes
2 answers

Why does my ScrollMagic.JS set the height of the element to 0?

I'm trying to make something like in this example: Link: ScrollMagic Examples I can't get it to work. The #pageContent height is only 0 when ScrollMagic.min.js is included. Picture - Element: #pageContent in inspect What I have tried: Using to…
simo026q
  • 21
  • 1
2
votes
0 answers

How to optimize "ScrollMagic+TweenMax+GSAP" performance?

At first sight an easy animation causes lags and is choppy on mobile devices. It looks quite normal on PC resolution, but not on mobile. In Chrome I can reproduce it by going to F12 > emulate mobile > iPhone 6/7/8. And when the page is scrolled…
Andrey
  • 712
  • 1
  • 8
  • 22
2
votes
0 answers

Scrollmagic - tween was overwritten by another

I use Scrollmagic Plugin with Tweemax but I have warnings message in Chrome Console : WARNING: tween was overwritten by another. To learn how to avoid this issue see here:…
Jandon
  • 451
  • 4
  • 19
2
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
  • 61
  • 10
2
votes
1 answer

Can't pin using ScrollMagic

I cannot, for the life of me, get a simple pin to work using ScrollMagic. I don't know what I'm doing wrong. The website, as it is now, cannot get any simpler, yet when I try to add one pin to a div, it doesn't work. I've spent hours trying to…
2
votes
0 answers

I am using Scroll magic and TimelineMax and it is behaving Wierd

I am trying to hide one element once it gets into the view bt the timeline max is behaving weird and the element is jumping I just started to use GSAP and Timeline max it will be really nice if anyone can help me with this here is the link for the…
Khagendra
  • 451
  • 1
  • 4
  • 17
1 2
3
27 28