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

How to update progress

When you scroll down the page, you will see the element with #pin will be sticky and the currentPercentage will keep updating until the value of currentPercentage is 1 and then not sticky anymore. The problem is after I scroll to some value, I…
CCCC
  • 5,665
  • 4
  • 41
  • 88
2
votes
0 answers

How to resize SVG Tweens on Scroll to fit with section's background

How to resize a SVG properly to make it zoom on scroll and blend with background. As you can see in the codepen, the example code is not perfect and performing what i want to achieve. I am struggling to do it with CSS alignment the XG SVG need…
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
  • 979
  • 2
  • 20
  • 47
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
  • 3
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
  • 702
  • 1
  • 9
  • 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
  • 605
  • 7
  • 32
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
  • 591
  • 1
  • 5
  • 19
2
votes
0 answers

Using JS media queries to change ScrollMagic triggerHook position

How can I successfully reload my scroll magic code and change the triggerHook position? When I try to do it with the code below it sets the trigerHook twice so there are two of them on the screen. My ScrollMagic code goes like this: //Scrollmagic &…
AGrush
  • 1,107
  • 13
  • 32
2
votes
1 answer

Strange dots appear when using SVG Animation with ScrollMagic

I'm trying to use ScrollMagic to make a signature-like SVG animation. I followed their example, but strange dots appear in the signature. Question: How do I remove the dots? Here is the code I used: JavaScript: var controller = new…
Raptor
  • 53,206
  • 45
  • 230
  • 366
2
votes
2 answers

How use Scroll magic in React JS

I have a page with React js and I want use scroll magic to make a waterfall animation where a bottle rotates when you scroll down. Like this: https://cockta.eu/en/#new_look_legendary_taste but I can not find any doc of how to use scroll magic in…
2
votes
0 answers

How to scroll effect with scrollmagic?

how do build this scroll effect which be found on scrollmagic.io? If you scroll a certain distance the blue screen changes in to a white screen.
Dj Cool
  • 27
  • 6
2
votes
0 answers

ScrollMagic animation on scroll even though scrollbar is disabled

Is it possible to animate elements using Scrollmagic plugin without scrollbar enabled. I have given 100vh height for my container so there will be no scrollbar. Can you anyone help me to find a solution for that? I have given my code…
sonu sasankan
  • 79
  • 1
  • 2
  • 10
2
votes
2 answers

ScrollMagic GSAP, Import issues

-I am using react framework. (create-react-app), and ScrollMagic Library, and am trying to implement the scrollmagic library in reactjs framework.I am unable to import the following Scripts. I have imported scrollmagic as follows import * as…
Manjot Singh
  • 184
  • 1
  • 2
  • 13
2
votes
1 answer

ScrollMagic - Add class permanently, not remove when scrolling back up

All I want to do is add a class to a div the first time it scrolls into view, then keep it there. (So, I don't want to toggle it - just fire it once). I have an animation that's based on adding a class to the parent div, and even though I specified…
NayDreams
  • 55
  • 1
  • 6