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

Why isn't my Scrollmagic/Greenstock animation working?

i just started working with scrollmagic, but i can't seem to get it functioning properly. I followed a simple tutorial to do a few animations on different sections. I'm not sure if didn't import the classes, right, but i'm stuck. Help would be…
0
votes
1 answer

Different display modi by multiple events

I wanted on different events, different display modi: .on("enter leave", function (e) { $("#artwork figcaption").style.display(e.type == "none" ? "block" : "none"); });
0
votes
1 answer

Scrollmagic - Changing body and div background color with multiple tweens

The site I'm working on uses scrollmagic to fade the color of the active div (each set to size of the screen) from back to white as it scrolls down. I have it changing the div color as well as the body color for a more seamless transition. For some…
CDAGeek
  • 59
  • 2
  • 14
0
votes
0 answers

Scroll Magic content height

I have problem with my site.. I am trying to modify this example from scroll magic website: http://janpaepke.github.io/ScrollMagic/examples/basic/section_wipes_natural.html only differencce is that some sections are heigher than view port height and…
adi86
  • 253
  • 1
  • 2
  • 8
0
votes
1 answer

Animating shape using snap.svg and scrollmagic

I am trying to create a code to animate my header as the user scrolls. I have managed to create the animations I want using 2 different plugins: snap.svg and scrollmagic. I'm new to both of these so please excuse my noobiness. Here it is on…
Omid
  • 13
  • 5
0
votes
2 answers

Background color also pinning with scroll magic

I have a one page scrolling website that I'm working on. I am trying to use Scroll magic to pin the first section, and then have the remaining part of the website scroll over top of it. As you can see in my fiddle the first section is pinned, but…
icekomo
  • 9,328
  • 7
  • 31
  • 59
0
votes
1 answer

can't get scroll magic to work in JSFIDDLE (part 1 of 2)

I have a one page scrolling website that I'm working on. I am trying to implement ScrollMagic and pin the first section so that the remaining sections of the website scrolls over top of the pinned section. I tried to create a jsfiddle to show the…
icekomo
  • 9,328
  • 7
  • 31
  • 59
0
votes
1 answer

Scrollmagic Show and Remove Pin on div entry

I've been playing with Scrollmagic and managed to get a few things working. What I'm trying to do right now is create a sticky social sharing bar for my blog at the bottom of the viewport. I've had no issues managing to get it to show up with my…
Phrosty30
  • 127
  • 2
  • 13
0
votes
1 answer

Keep a scene with background video pinned until after video has finished playing

Firstly, great library! Really enjoying using ScrollMagic. Fantastic! Secondly, I hope the subject for this question is clear enough... What I am trying to achieve: I have a scene - at viewports full width and height - that has a pin, duration and…
BarberCraig
  • 157
  • 1
  • 9
0
votes
0 answers

Choppy/laggy pinned element with GreenSock smooth scroll function

I have a parallax/animation page where I pin an element for the duration of its container. I also override the natural mouse scroll behavior with function: function smoothScroll() { var $window = $(window); var scrollTime = 1; var…
Camathon
  • 514
  • 2
  • 5
  • 22
0
votes
2 answers

How to detect support of immediate scroll events with Modernizr?

I use ScrollMagic to trigger animations on each section of a web page. This works great for desktop and for some browsers on mobile. However there are some mobile browsers (older versions of Safari and Chrome (on ipad)) that don't play these…
user1214678
0
votes
1 answer

Multiple ScrollMagic actions for conceptual art website - each action working only exclusively

I am trying to combine two different actions on my website, and since I'm a beginner in javascript and scrollmagic, I've been struggling to make it all work together. I've managed to make each set of actions work individually. I based my code on the…
user21665
  • 11
  • 3
0
votes
2 answers

Cross-dissolve transition for scrolled elements

I am creating a long single page website and using ScrollMagicJS v1.3.0 to trigger events and to make some elements sticky. I would like to create a variety of other transition effects as one scrolls down the page. Here's a jsfiddle that…
Wes Modes
  • 2,024
  • 2
  • 22
  • 40
0
votes
1 answer

Is there a way to pass other parameters to the scrollTarget callback function?

I was taking a look at ScrollMagic's documentation. I see that I can use a callback function to change the scroll behavior as shown below: controller.scrollTo(function (newScrollPos) { $("body").animate({scrollTop: newScrollPos}); }); Is there…
user1214678
0
votes
1 answer

ScrollMagic SVG Drawing Text

I can not figure out why my svg is not drawing. I get no "real" errors on my console (The "WARNING: tween was overwritten by another" is not relevant here) You can see the full demo here: http://mc-communicate.com/test/svg.html Here are the relevant…
GrampaRay
  • 170
  • 1
  • 13