Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
ScrollTrigger doesn't seem to work for sliding animations
See original GitHub issueI need to slide elements into my page from the side. ScrollTrigger has issues doing this because it flickers the visible/invisible classes rapid-fire constantly while scrolling. See the demo below showing the issue. Open your web inspector and scroll to the blue section and note how the classes flip rapidly back-and-forth while scrolling, even while the element is totally visible.
<!DOCTYPE html>
<html>
<head>
<title>ScrollTrigger bug demo</title>
<script src="https://apps.vividimpact.com/proofs/vividimpact.com/wp-content/themes/vivid-impact-theme/ScrollTrigger.min.js"></script>
<style>
.visible {
margin-left: -1000px;
animation-duration: 5s;
animation-name: slideAcross;
}
@keyframes slideAcross {
from {
margin-left: -2000px;
}
to {
margin-left: 2000px;
}
}
</style>
</head>
<body>
<div style="height: 3000px; background: red;"></div>
<div data-scroll style="height: 100px; background: blue;"></div>
<div style="height: 3000px; background: green;"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
var trigger = new ScrollTrigger();
});
</script>
</body>
</html>
Issue Analytics
- State:
- Created 6 years ago
- Comments:6 (3 by maintainers)
Top Results From Across the Web
Animation conflicts (horisontal slider + scroll trigger) - GSAP
I've disabled one of your ScrollTriggers and the jump seems to have been gone. With this particular ScrollTrigger you're animating the same ...
Read more >Let's Make One of Those Fancy Scrolling Animations Used on ...
Apple is well-known for the sleek animations on their product pages. For example, as you scroll down the page products may slide into...
Read more >Newest 'gsap' Questions - Stack Overflow
how to animated a swiper.js slider ... When I include the gsap core, tweenmax is not working anymore. ... GSAP ScrollTrigger doesnt work...
Read more >ScrollTrigger feature: containerAnimation - YouTube
The new containerAnimation property allows us to create ScrollTriggered animations within a container that's moved using the animated ...
Read more >Introducing ScrollTrigger for GSAP - YouTube
A visual walkthrough of ScrollTrigger for GSAP which empowers you to create jaw-dropping scroll-based animations with minimal code.
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
I’m not longer using the library (this has gone on so long we have a new website now 😃)
But I did update my example PoC code above with the new version and it appears the issue has been resolved.
v1.0 is just released! Could you check if this issue still exists? Please note that the API has changed quite a bit.