Search the Community
Showing results for tags 'scrooltrigger'.
Found 2 results
-
The first section turn white when scroll back up after clicking an ahchor
cR_BLue posted a topic in GSAP
Hi, i created a code that have card stack animation and anchor link. The animation when scroll to through manually or anchor link have no problem. However after clicking an anchor link and when i try to scroll back up manually. The first section (in this case <div id="link1" class="homeFeature_section homeFeature_section01">) turn blank or white. I cant recreate the situation in codepen but i copy paste the same code above. Can someone help? server.js style.css -
Good afternoon, this is my first post in the community, so I apologize in advance if I do anything wrong. I am having an issue with the "pin" attribute for ScrollTrigger animations, using Elementor Pro. I created an example to demonstrate it. I created 3 containers with 100vh, and in the central one, I added a text. The animation changes the text opacity from 20% to 100%, and keeps the container fixed during the animation. The start works fine, the animation is triggered, and the container stays pinned. However, when the animation ends, the container disappears, and after that, it appears from top to bottom, as if it teleports to the position it would be if it weren't pinned, then goes back to its pinned position. I’m not sure what could be causing this. I have more complex animations with horizontal scrolls, and this problem always happens when I set the animation to be pinned. https://r2u.io/text/ <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script> <script> gsap.registerPlugin(ScrollTrigger); gsap.fromTo(".h2", { opacity: 0.2 }, { opacity: 1, scrollTrigger: { trigger: ".meuContainer", start: "top top", end: "+=100%", scrub: true, markers: true, pin: true } }); </script> output3020.mov
