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

gasp doesent work on safari

anyone help me why this doesen't wrok on safari? it works great on chrome. the js script works on firefox also but with some svg problems which doesnt appear in their right position but thats another issue... in safari in the debugger tab i get…
Ilir Bajrami
  • 119
  • 2
  • 15
0
votes
1 answer

Scrollmagic & GASP how to restart animation

I'm creating an animation of a book. the pages should turn fast (as i did in the animation) but I want them to go back in the starting position after e scroll back out of the trigger range. below is the js code and the codepen…
Ilir Bajrami
  • 119
  • 2
  • 15
0
votes
1 answer

ScrollMagic: How to place content on top of parallax background

So I am having an issue with building a vertical parallax scrolling website. At the moment I am using ScrollMagic to create parallax sections, and it works perfectly. The issue comes when I try to put content on top of it. For my situation I am…
Andrejs Gubars
  • 584
  • 7
  • 30
0
votes
1 answer

Scrollmagic timelineMax duration offset

I have a pretty simple Scrollmagic event. It involves section wipes, as explained here - ScrollMagic Section Wipes Example. So taking that I put together the following ScrollMagic setup. var ctrl = new ScrollMagic.Controller({ …
Chris James Champeau
  • 984
  • 2
  • 16
  • 37
0
votes
1 answer

Scrolling animated timeline using jQuery and ScrollMagic

What I currently have I'm building an HTML/CSS/JS scrolling timeline using jQuery and ScrollMagic (with GSAP plugin). I have the basic timeline functionality working, with timeline events animating as the page scrolls down. jsFiddle of the page in…
conbask
  • 9,741
  • 16
  • 57
  • 94
0
votes
1 answer

Horizontal animation while vertically scrolling with scroll magic

I want to have a full screen (width/height) panel to animate horizontally (parallax) as the user scrolls vertically. I am trying to use the basic section slides example but can't get it to work. I have a fiddle here.…
CowboyB
  • 100
  • 2
  • 9
0
votes
1 answer

setTween does't work in ScrollMagic

I just started trying to figure out how GSAP and ScrollMagic work together, and as I follow up the source code in this cool guide site: http://scrollmagic.io/examples/basic/simple_velocity.html , it does not work in my codepen. Here is mine with…
Hans Liu
  • 37
  • 2
  • 7
0
votes
1 answer

ScrollMagic plugin is working, but is not "tying" the animation to the scroll

I am trying to achieve an SVG text scroll with the scrollmagic plugin, one such as this: http://janpaepke.github.io/ScrollMagic/examples/advanced/svg_drawing.html However, when I took the sample code from here and incorperated it into my site, the…
Dirk Dunn
  • 363
  • 2
  • 3
  • 14
0
votes
0 answers

Using Scrollmagic in an iFrame

I want to use Scrollmagic in an iFrame. Is there a way to make this work? Example: http://raet.boldinteractive.nl/staging/iframe.html The 4th section has a trigger (see indicators)
colin
  • 425
  • 2
  • 5
  • 17
0
votes
2 answers

Adding tween with dynamic variables to Scrollmagic/GSAP timeline

I am a Jquery novice, and would have thought the solution to my problem to be quite simple, however I have tried a million permutations of this code and I can't solve it. I am using Scrollmagic and GSAP, and want to trigger three tweens from the…
GBin
  • 31
  • 7
0
votes
1 answer

Whats scrollmagic paneling and how to implement iscroll for anchor navigation?

Thanks Gray Ghost for scrollmagic examples: paneling http://codepen.io/grayghostvisuals/pen/enxAp anchor navhttp://codepen.io/grayghostvisuals/pen/EtdwL does anyone care to explain what is paneling use for in scrollmagic? How is it different from…
Iverson
  • 179
  • 3
  • 11
0
votes
1 answer

ScrollMagic pin is not working in TimelineMax

I am new to ScrollMagic but loving it. So I have a Timeline which bring together the parts of an airplane together to form an airplane.I intend to change the tweened parts of the airplane to a single image of the entire plane and then pin the single…
0
votes
1 answer

Very confused about ScrollMagic's onLeave event

I've done a very bare ScrollMagic site based on one of the tutorials: http://www.oneniceday.com/Parallax-1/P2.html If you View Source, then at the very end, there's this line: triggerElement: "#pinned-trigger1", duration:…
Xeon
  • 385
  • 3
  • 11
0
votes
1 answer

How to give position values for element to align perfectly at all screen resolutions?

I am using ScrollMagic for animations to happen on scroll. I'm not really well versed with this, still in the learning process. So I have a Airplane of which parts are disassembled and come together on scroll and form a Airplane. For example - the…
0
votes
0 answers

How to remove fix text trigger on right side in browser?

How to remove fix text trigger on right side in browser? I searched in Google. Someone tell to remove scene.addIndicators() but when I remove that the scroll is gone. This is screenshot This is my code