ScrollMagic

animation ui-component

ScrollMagic is a JavaScript library that helps you create magical scroll interactions. It enables you to trigger animations or any dynamic changes based on the user's scroll behavior.

Latest Ver 2.0.8

Homepage

Github

14,960

Where scrolling casts its magic

Infuse life into every scroll with ScrollMagic.

ScrollMagic is a library that facilitates dynamic control of elements on a webpage in response to user's scroll.

CDN Download

License: (MIT OR GPL-3.0+)

Asset Type :

View All Versions

https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/ScrollMagic.js

https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/ScrollMagic.min.js

https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/animation.gsap.js

https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/animation.gsap.min.js

https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/animation.velocity.js

https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/animation.velocity.min.js

https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/debug.addIndicators.js

https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/debug.addIndicators.min.js

https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/jquery.ScrollMagic.js

https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/jquery.ScrollMagic.min.js

Sample Code

⚠️ Some code, including import statements, may not run properly on jsFiddle. If it fails to execute, please copy the code and try it in your own environment.

📄 HTML
<div id='example'>
  <p>Hello</p>
</div>

🧩 External JS
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/ScrollMagic.min.js"></script>

⚙️ JavaScript
var controller = new ScrollMagic.Controller();
var scene = new ScrollMagic.Scene({
  triggerElement: '#example',
  duration: 300
})
.setPin('#example')
.addTo(controller);