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

Scroll Magic scrollmagic-pin-spacer not resizing on window resize

I'm working on a website that is built using CRA (Create React App ), which I combined with ScrollMagic and GSAP. The API is mainly used in the home page where I pin the root div so that nothing moves on a scroll apart from the animation in the…
1
vote
1 answer

How to trigger TimelineMax animation when ScrollToPlugin is scrolling (ScrollMagic)?

I have a section with button which on click triggers scroll to the next section. What I want to do is when this scroll event is happening I want to trigger my tl.from animations. Right now animations tl.from are triggered only on user scroll but not…
Person
  • 2,190
  • 7
  • 30
  • 58
1
vote
1 answer

Animating React components with react-scrollmagic

I'm trying to get to grips with react-scrollmagic and react-gsap and am attempting to achieve a scroll activated opacity fade-in/fade-out when scrolling from one component to the next similar to that seen here however i'm barely making any…
Ben
  • 41
  • 1
  • 7
1
vote
0 answers

Scroll Magic Section Wipe height issue

I have implemented section wipes to some success, the issue I'm facing is for the first section, my content breaks when taller than the browser height. This is not an issue for the subsequent sections. Fiddle…
1
vote
0 answers

Parallax animation: How to know which method is used in a webpage?

I'm investigating about the different ways of building a website with parallax animations. I've seen a lot of plug-ins and libraries (ScrollMagic, Greensock, etc.), but I would like to know which way have this webpage used. I've been diving into the…
Nil Suria
  • 474
  • 4
  • 15
1
vote
0 answers

ScrollMagic & GreenSock iterating over group of elements

So I have a list of divs that I want to expand and contract as the viewport scrolls, which I have assigned [data-entry] attributes to. The code below will trigger for all elements at once, centred around the first, rather than each individually as…
DaveMoTron
  • 23
  • 9
1
vote
1 answer

ScrollMagic with smooth scrolling?

In ScrollMagic, is it possible to do when I scroll my page, then I will get smooth scrolling effect? I know there is other libraries and plugins that do. but I asking can ScrollMagic can do that? if so, how? I can't find any example for doing so.
Weved
  • 813
  • 2
  • 9
  • 20
1
vote
1 answer

Smooth scroll for specific anchor tags not for all anchor tags

I am trying to implement the smooth scroll when user click on the anchor tag then it will scroll and reach the target. it's working perfectly with all the anchor tag. Now my issue is, I have two tabs called as part1 and part2. There is no data in…
user9437856
  • 2,360
  • 2
  • 33
  • 92
1
vote
0 answers

How to add ScrollMagic to react?

At first, i tried to add scrollmagic with componentDidMount() but that scroll effect was acitvating with out any scroll just when page reloads already works. addIndicators() doesnt work and in console shows that (ScrollMagic.Scene) -> ERROR calling…
1
vote
2 answers

ScrollMagic setClassToggle Persistance?

I'm using the setClassToggle() method from ScrollMagic. The idea is that when you scroll down pass a trigger, you can add a css class to an element. And if you scroll up pass a trigger, it will remove the class from the element. As described in…
John
  • 32,403
  • 80
  • 251
  • 422
1
vote
0 answers

Scrollmagic on leave play a timeline after another has finished

So this is my scene in question //-- body of work - project reveal const bodyOfWorkProjectReveal = new TimelineMax({ paused: true }); bodyOfWorkProjectReveal .to(bodyOfWorkSectionTitle, 0.3, { autoAlpha: 0, y: -20, ease: Circ.easeInOut }) …
Matthew Ellis
  • 89
  • 1
  • 6
1
vote
1 answer

Angular 2 and Scrollmagic

I am trying to implement scrollmagic into my Angular 2 App but I have been unsuccessful up to now. I have looked at a lot of tutorials but they haven't been able to help me. I am looking for someone who can plainly explain to me how i can get…
user7210105
1
vote
0 answers

How to trigger css keyframe with Scrollmagic?

I'm looking for example to trigger CSS keyframe with Scrollmagic but I couldn't find it. Basically I need JavaScript code to trigger this keyframe with scrollmagic. .project-title-line { width: 264px; height: 4px; margin-top: 10px; …
zee7
  • 67
  • 1
  • 10
1
vote
1 answer

How to select element thats between ranges?

I have side bullets that are menu scrolling to section of onepage, i did a scroll animation but i would like to change class="active" between bullets when scrolling. I know it can be easly achieved by jQuery(body,window).scroll() with…
Mr 660
  • 51
  • 10
1
vote
1 answer

conflict between fullPage.js and ScrollMagic

I have come across an issue using fullPage.js and ScrollMagic when trying to achieve the below output https://drive.google.com/file/d/1uS21T4rjQfhm0ZIYUShMBI2-jHT0evxC/view This is working flawlessly in the normal scrolling. Code I'm using HTML5…
realmau5
  • 11
  • 3