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
1 answer

CSS/Javascript - Parallax scrolling - Scrollmagic link movement blocks other image links

Hello fellow programmers, I am new at programming in HTML5/CSS/Javascript and I will try to make my question as clear as possible. I've used scroll magic on my website to have the navigation links scroll to the side as you scroll down. Here is the…
user21665
  • 11
  • 3
0
votes
1 answer

ScrollMagic not working with jQuery linked at bottom of page

Is there a way to use ScrollMagic when jQuery is loaded from the bottom of the page? It works if I put jQuery in the but not if I don't. So far the site has been working well with all the scripts loading at the bottom and I don't want to change…
Hoby
  • 891
  • 6
  • 3
0
votes
2 answers

AngularJS working ScrollMagic

I have a site using jQuery and ScrollMagic. When the user scroll to a specific element ScrollMagic captures that and trigger an animation using TweenMax. In jQuery the code looks like this var scene = new ScrollScene({ triggerElement:…
Desmond Liang
  • 2,210
  • 4
  • 26
  • 32
0
votes
1 answer

Scroll Section to top when active trigger in ScrollMagic

I try use Scrolltomagic to scroll section when trigger is activated. var sceneOptions2 = {duration: 500}; var divfocus = $("div.wrapper section"); when the section is activated it should go up to the top of the page. But scrolling donts works. new…
0
votes
1 answer

IScroll not working if contents are 100% height?

I'm using IScroll on a page that makes heavy use of ScrollMagic, but cannot for the life of me get IScroll to function. The primary issue appears to be that most (but not all) of the elements in the page need to take up 100% of the viewport's…
ken.dunnington
  • 905
  • 1
  • 7
  • 20
0
votes
2 answers

Conditionally Fixed DIV Based on Window Size

I'm trying to write a script that will fix a DIV if the screen is a certain width. This is what I have so far, but the logic is not correct and I'm not sure how to write it. var controller = new ScrollMagic(); var w = $(window).width(); if(w >=…
pedalGeoff
  • 747
  • 1
  • 8
  • 15
0
votes
1 answer

Using ScrollMagic to fade text

Here is my markup:

It starts with an idea

But…

dennismonsewicz
  • 25,132
  • 33
  • 116
  • 189
0
votes
1 answer

ScrollMagic doesnt respect the height of my div when resize

I'm working on a website using scrollmagic. I have pinned a div and made a wipe with translate y, the problem is when I resize my window the section pin seems to lost its height and hide the rest of the content. I believe it might be an error about…
EloiseM
  • 39
  • 1
  • 10
0
votes
1 answer

Simple Tween local copy using Scroll Magic not working

Good day! I'm trying to make this example of simple tween using scrollmagic.js. Yeah, it works on jsfiddle. To be sure, I put scene.addIndicators() to see the start, end and the trigger hook. It works clean. As you can see in the jsfiddle:
0
votes
2 answers

Using links within a parallax ScrollMagic site

I'm making a vertical parallax scrolling site with ScrollMagic which includes a navigation menu at the top to link within the site. The menu itself works correctly when no parallax animation is applied to the scroll but when the parallax is added…
obie
  • 578
  • 7
  • 23
0
votes
2 answers

Background-Position animation issue in Firefox and IE

I am a designer turning developer, working on learning parallax. I made this test, and it works great on Chrome, but not in FireFox or IE. Any suggestions? I am using ScrollMagic, which is built on GSAP. Here is my…
Joey Ellis
  • 63
  • 4
0
votes
1 answer

translate / tween element, if possible between two classes, as user scrolls

I'm trying to translate an element as the user scrolls. If possible, to class on scroll up and from a class on scroll down. I think this is possible as the magic-wand does this on scroll down in this demo:…
gomangomango
  • 661
  • 1
  • 10
  • 29
-1
votes
1 answer

How to Create Scroll Transition?

I want to add a transition of this type on a website I creating on React. Can some please guide me on how I can achieve this or is there any lib that I can refer? Scroll Transition
Ashish
  • 51
  • 1
  • 4
-1
votes
1 answer

Using smoothscroll with gsap and magicScroll Pinned section

i'm using gsap with scroll magic to animate on my project i tried to implamente smoothscroll, it's working right ecxept for pinned section. Any help plz ?
Manel May
  • 1
  • 1
-1
votes
1 answer

Multiple controllers bad for performance?

Does it have an impact on performance to use multiple controllers for the same container? I'm asking because I'm using several layout modules in my project. I'd like to know if it is easier to have separate controllers and scenes for every module.
1 2 3
27
28