Hi all,
We're just getting started with the whole GSAP animation library and we ❤️ it! That being said, starting with something new usually ends with a bunch of questions
We are running into an issue with Scrolltrigger:
Our page consists of multiple sections.
When the second section hits the top of the window, it gets pinned.
Inside the section, some animations get fired, based on scrub:true.
BUT when this second section is pinned (you see the bottom of the section at the top of the image), it pushes down the start and end position for the animations of the third section (the section with the shield, start and end are in green & blue). The start and end positions should be aligned at the center of the section.
It's because of the pinSpacing: true on the second section, but can this be reset when the pinned element is unpinned?
Code for the second section:
//create a timeline
const timelineTwo = gsap.timeline();
// create a scrolltrigger to make the sectionTwo section sticky (pinned)
const sectionTwo_animation = timelineTwo.to("#sectionTwo", {
scrollTrigger: {
trigger: "#sectionTwo",
start: "top top",
end: "bottom top",
scrub: true,
pin: "#sectionTwo",
pinSpacing: true,
fastScrollEnd: true,
invalidateOnRefresh: true,
anticipatePin: true,
onLeave: self => {
let scroll = self.scroll() - (self.end - self.start);
self.refresh();
self.kill();
self.scroll(scroll);
timelineTwo.progress(1);
},
},
});
// while the section is pinned, animate the bullets in the section
// fade in the bullets with their associated image at the sime time, bullet by bullet.
document
.querySelectorAll("#sectionTwo_bullets li")
.forEach((bullet, index) => {
const assigned_image = `#${bullet.dataset.image}`;
const opacity_image = gsap.getProperty(
assigned_image,
"opacity",
);
// create a separate timeline animation for the parallel loading the images
const bulletTL = gsap.timeline();
bulletTL
.fromTo(
assigned_image,
{ opacity: opacity_image },
{
opacity: 1,
},
)
.fromTo(
bullet,
{ opacity: 0 },
{
opacity: 1,
},
"<",
);
// set up a scrolltrigger to scrub trough the bullet list, to animate the fading in of the bullets and their image, when scrolling.
ScrollTrigger.create({
once: true,
trigger: bullet,
start: `top+=${150 * index} top`,
end: `bottom+=${150 * index} top`,
scrub: true,
markers: {
startColor: "#00FF00",
endColor: "#0000FF",
},
animation: bulletTL,
onEnter: () => bullet.classList.add(style.active_bullet),
});
});
// in the second section there is also an image that needs to fade in at the end of the bullet scrub.
const sectionTwo_download = timelineTwo.fromTo(
"#sectionTwo_download",
{
opacity: 0,
},
{
opacity: 1,
scrollTrigger: {
trigger: "#sectionTwo_download",
start: "top 50%",
end: "top 80px",
scrub: true,
},
},
);
Last question: is there an example on how to handle timelines in a pinned element?
The white section holds a list of images that need to fade in on scrub, then some other animation etc... But how can you keep that element pinned until the last animation is complete?
Unfortunately, I cannot provide a pen at this point, since this is all under an NDA. But if more info is needed, I can provide as much as possible...
Thanks a bunch!
