IndM

I saw this code that ZachSaucier made. In my use case, I want to make sure that the background image always starts from the center. So in this example: instead the image starts with the head, it should start with 'the batman' title because that's the middle of the image. How can I achieve this?

@ZachSaucier Hi! How would I make this work with images that are larger than the section? For example: the image has a height of 700px and set as background just like the code above. The section is 300px. How can I make the position from the image started from the center and not the top?

Hi @Rodrigo, thanks for the response! This code works great, but only when you have the full grid displayed in the viewport. When you have a long grid that not fully fits the viewport, the animation shouldn't play on the elements that aren't visible. Only animate those when you scroll to the element in the viewport. I made a little demo: https://codepen.io/indy-meermans/pen/NWBVYqG

@GreenSock How do I use this but with a scrolltrigger? I need to animate items per row, but it seems that when I use the row as a trigger it doesn't work. This is what I added to it: ``` rows.forEach((GridItems) => { let tl = gsap.from(GridItems, {opacity: 0, yPercent: 80, stagger: 0.05, duration: 0.7, overwrite: true}); ScrollTrigger.create({ trigger: GridItems, start: 'top 70%', end: 'bottom bottom', markers: true, onEnter: () => tl.play(), onEnterBack: () => tl.restart(), onLeaveBack: () => tl.pause(0), }); });

For everyone who experience the same issue: Gsap needs to be executed only when everything is loaded. Otherwise the calculations are way off. I fixed it in this case with wrapping the code around my gsap code so it will be executed when the dom is fully loaded. document.onreadystatechange = () => { if (document.readyState === 'complete') { // Gsap code here } }

@Cassie I think where it needs to be heading to, I'm going to ditch the classes and work with tweenmax. I mark this case as resolved for now and will break my head on this ?. Thanks for the tips Cassie! Appreciate it ?

@Cassie The problem is that in the demo's rodrigo posted, the header element is a standalone and not wrapped inside a div. In my case, it's supposed to be wrapped in a hero wrapper due some options and configurations on the hero element. So with my code, I tried to achieve with a pinned item to recreate a sticky element. That first scroll the header as it is and after like 180pixels it adds the sticky__init class. That code works perfect and it does the job for me. As shown in the video, it only happens when the page is already scrolled further on load. Due some elements that are set to display none when scrolled further (that's the sticky__init class), the header becomes smaller. So when scrolling back to the top the scrolltrigger still thinks the header element is that small, so the starting points and pinned height are way off. If wanted, I can send you the development link in chat, so you can see the issue better.

@Rodrigo Hi! I accidentally removed to much ?. I've updated the code and tried one of the examples above but no luck. The problem is (I think) when the page loads and the class sticky is already active, so the element shrinks. The pin will take that height so when you scroll back to top to put the navigation back on it's place. The scrolltrigger still thinks it has the same height as the class sticky. That's the behavior shown in the screenrecording I posted.

This code creates a sticky header from a navigation. When the page loads and you already scroll further in the page, the pinned height and start position are off from the original starting point. Perhaps due the sticky class that already have been put on it? I can't reproduce it in the codepen, but I made a little screen recording. The code in the codepen is the same I use, but cleaned up. https://app.usebubbles.com/83E8qSeoEDVNLebLMRuR3r/indy-s-video-recording I'm clueless what the problem is .

Hi @Carl! The fix was indeed needed to put a wrapper around the element I wanted to animate.

When using a slide-in-down animation, the scrolltriggers are placed in the wrong position. This leads to incorrect start from other animations under it. I'm using a double scrolltrigger because I wanted to emulate a mirror effect. So when scrolling back up the animation will start again from the original state. Am I using an incorrect way of scrolltrigger in combination with gsap.from or did I make a stupid mistake? I've tried using scrolltrigger.refresh inside the onEnter but it still seems hacky and still not always correct after it.