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

My .js file won't link to my HTML, unable to get scrollmagic to work

I am trying to use ScrollMagic on my webpage. I've entered the code in a .js file, and have linked both this file and a ScrollMagic cdn to my html, but it hasn't made a difference to my page. I've tried adding ../ to the file link and adding…
RianneJ
  • 143
  • 1
  • 11
-1
votes
1 answer

JS Creating a Moving Landscape

Testing front-end to create my own interactive portfolio website: marcelmp.x10host.com. I'm trying to create my own story with a landscape with buildings and a moving car pinned on the container, all working based on scroll position. I'm using…
Marcel
  • 1
  • 1
  • 2
-1
votes
1 answer

ScrollMagic - Full video background with scrolling parallax text

This is regarding the ScrollMagic (Basic) Section Wipes - Manual. (http://scrollmagic.io/examples/basic/section_wipes_natural.html) I have used the above with a video background - I want the sections (text, with blank background) to scroll up and…
Char
  • 318
  • 2
  • 17
-1
votes
2 answers

What is the lightest JavaScript plugin for parallax scrolling layers animations?

I'm trying to create this "parallax" effect : https://www.laruchequiditoui.fr/fr (like the .homeSection--collection section). It's a div containing three layers with an effect of perspective on scroll. This website uses TweenMax but it seems heavy…
Beny
  • 890
  • 2
  • 15
  • 26
-2
votes
2 answers

How to manually delete whitespace at bottom of page

https://demo.joinspheres.com I'm working on a demo scroll animation website and to get it to work the way I want (each animation happens immediately after the next), a ton of whitespace is added to the bottom of the page. The main issue is that I…
Connor W
  • 138
  • 7
-2
votes
1 answer

ScrollMagic - Stacking divs

I want to achieve something similar like this example: https://scrollmagic.io/examples/basic/section_wipes_natural.html But instead of fixed height divs, here is the idea: The parent div has lots of child divs with different heights. When you start…
dvarga
  • 51
  • 6
-3
votes
2 answers

255 Uncaught ReferenceError: $ is not defined after adding ScrollMagic

I was trying to use ScrollMagic but it is not working when I inspect element it is giving this error255 Uncaught ReferenceError: $ is not defined Even tho I've included all the libraries in the header and the actual script on the bottom of the…
Радж
  • 9
  • 5
-3
votes
1 answer

CSS Scroll Wipes

I am trying to implement div scroll wipes like this example Does anybody know of a way to achieve this using CSS instead? I have been researching but haven't found any examples. Is this parallax scrolling? Does anybody know of any examples they can…
fightstarr20
  • 11,682
  • 40
  • 154
  • 278
1 2 3
27
28