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

Scroll Magic Pins used with Anchors

I am having troubles finding a solution for using Anchor Links with Scroll Magic Pins together with Scroll Magic "Section" Pins Let's Say i have 3 sections on the page. Each on eis the height of the window and gets pined like so: for (var i=0;…
sepher
  • 55
  • 7
2
votes
1 answer

Reveal html5/youtube video on scroll

I have a video (currently it's embedded YT video, but could be a normal mp4/HTML5), which I would like to be revealed on scroll. So when scrolled, the text content should go into the top and then the video should be revealed and the user should be…
Smithy
  • 807
  • 5
  • 17
  • 43
2
votes
0 answers

How to jump to the middle of a timeline/tween and continue it from that point

I need to be able to jump to the middle of a tween that is lower down on the page and hasn't begun, and then begin the tween at the point where I jumped in. When I click on the nav menu (seen as an unloaded image in the header), I need to be taken…
brienna
  • 1,415
  • 1
  • 18
  • 45
2
votes
1 answer

Use gsap with nuxtjs

I want to use gsap in combination with ScrollMagic. ScrollMagic is already implemented and it works fine, but when I want to use animation.gsap i get the error These dependencies were not found: * TimelineMax in…
Gregor Voinov
  • 2,203
  • 7
  • 34
  • 52
2
votes
1 answer

Scroll-Magic - Stop animation from replaying?

I've been learning how to implement more animations on my sites. I was trying to figure out this code because it is similar to the animation I want to implement but I can't seem to wrap my head around it. Ideally, I want the animation to play just…
andersts
  • 61
  • 5
2
votes
1 answer

ScrollMagic: make content hide the pinned area

I am using ScrollMagic on my page. Here is the HTML:
This is a pinned area.
curious1
  • 14,155
  • 37
  • 130
  • 231
2
votes
1 answer

Add Scrollmagic to Greensock code

Hallo I am pretty new to GreenSock and I need some help... I would like to apply Scrollmagic at this Greensock code: codepen.io/GreenSock/pen/FqrEv I was looking to: https://ihatetomatoes.net/svg-scrolling-animation-triggered-scrollmagic/ Like point…
Drago
  • 23
  • 6
2
votes
1 answer

ScrollMagic with GSAP ist lagging

I would like to use ScrollMagic with GSAP and TweenMax for a scroll based animation. I've made some experience with ScrollMagic in the past and it always works fine. This time, the animation is quite slow and the debug.Indicators as well. This is my…
Jonas
  • 475
  • 5
  • 17
2
votes
1 answer

ScrollMagic : JQuery element is not working for triggerElement

As the documentation The value for triggerElement will be a selector, DOM object or jQuery Object that defines the start of the scene. If undefined the scene will start right at the start of the page (unless an offset is set). But I think this…
Cataclysm
  • 7,592
  • 21
  • 74
  • 123
2
votes
0 answers

CSS Animation snaps to end state when triggered in Safari

I am building my portfolio with a Wordpress plugin called Semplice and am using ScrollMagic to trigger CSS animations to reveal content on scroll. Everything is working wonderfully in Chrome and Firefox but in Safari (both on Mac and iOS) the…
Tilo
  • 21
  • 2
2
votes
1 answer

scrollmagic/greensock .to affecting the initial position even when no scrolling has taken place

I'm trying to implement a parallax scrolling following the scrollmagic examples. The greensock documentation says that something like TimelineMax.to defines the final position of the element within that scene (as opposed to .from which defines the…
nonhocapito
  • 466
  • 5
  • 18
2
votes
1 answer

ScrollMagic. Add class to two elements

I'm trying to set visible class to element .wordpress and .wordpress-txt For one element, this work: var sunScene = new ScrollMagic.Scene({ triggerElement: 'body', triggerHook: 0.5, offset: 1000, duration:…
aitor
  • 2,281
  • 3
  • 22
  • 44
2
votes
2 answers

Scrollmagic ajax page load issue

Hi guys I am currently setting up a Wordpress page where I am loading in pages with Ajax and using Scrollmagic to set to trigger points for different containers in order to do some parallax effects. On the first page view everything works fine and…
Mikkel Fennefoss
  • 857
  • 1
  • 9
  • 32
2
votes
0 answers

Use ScrollMagic (or other library) in Asp Spa Template

I use the ASP .Net SPA Template to develop a new website. This is the first time I try it in this way. http://blog.stevensanderson.com/2016/05/02/angular2-react-knockout-apps-on-aspnet-core/ (Aurelia and Webpack) Now i like to use ScrollMagic on…
Bsel
  • 85
  • 9
2
votes
1 answer

(intermediate value).setTween is not a function

I am a noob to using scrollmagic and trying to learn by replicating one of the examples of ScrollMagic. http://scrollmagic.io/examples/advanced/advanced_tweening.html In order to load scrollmagic and greensocks javascript library, I added these…
D.R
  • 829
  • 4
  • 16
  • 30