_Moon

Hello everyone! I've been using the plugin for a while now but ran into an issue i can't seem be able to fix. In this page https://gsap.sitedev.pt (didin't create a codepen because it would be hard to replicate), i ran into an issue with the scrolltrigger plugin. My issue is with the first two sections. I'm using this example: I need to have two sections with div's pinning to eachother but the two have to be seperated so i created two instances of scrolltrigger: ScrollTrigger.create({ trigger: ".container-animation-first", start: "top top", end: () => (container.scrollWidth - window.innerWidth), pin: true, anticipatePin: 1, scrub: scrubValue, invalidateOnRefresh: true, }); ScrollTrigger.create({ trigger: ".container-animation-secondary", start: "top top", end: () => (container_secondary.scrollWidth - window.innerWidth), pin: true, anticipatePin: 1, scrub: scrubValue, invalidateOnRefresh: true, }); As you can see in the following file: https://gsap.sitedev.pt/wp-content/themes/wp-starter-theme-master/assets/js/animation.js The issue here is that this only works in the first section, creating some kind of issue with the second section where the code applies because the first section for example this property: padding: 0px 0px 9640px; while the second has: padding: 0px 0px 0.001px; not creating because of this the conditions for the scroll to happen, nor does it pin like the first one does. I've tried several solutions but can't be able to seem to find a fix so the two sections pin and work one after the other. I've tried the fix in "Using one ScrollTrigger or animation for multiple "sections" " but it does not seem to fix it as the exact same thing happens. I can't seem to be able to figure out what the issue is, and if i could get any help i'd appreciate it! Thanks in advance for any help!

Hey everyone! I've started to use gsap recently and i'm in love with it! Recently i ran into an issue that i can't seem to figure out and i'd like to know if there is anything i'm doing wrong. The issue is as follows, i have two sections one that scroll vertically and while u scroll it starts to show elements coming from the top and bottom of the page, and another one who scrolls horizontally with sections. It works almost perfectly on desktop sizes, but when i try to test it in either tablet sizes, or in an actual table device it errors out. The animation on the first section stops working and it creates a huge white space on the bottom of it while the second one is way far down instead of almost "glued" to the other one and it just bugs out. Website where this happens: http://gsap.sitedev.pt/ Recently i needed some help to pin a div and i used this example. If you try in the dev tools and set it to an ipad you can understand what's going on. The thing is in the codepen attached to this post, it works perfectly where you have to scrolltriggers divs and they both work perfectly on any sizes, but when i replicate that exact same code to anywhere (my wordpress installation, normal HTML,etc). I'll also attach screenshots of the bug in the table sizes! The code in my codepen is the exact same as in the website. I know it's a bit hard to figure out but i'd love some help since i can't seem to figure out this issue!

Hello everyone! I'm new to GSAP and i ran into a issue which i can't seem to figure out. So in my pen i have a horizontal scroll with 3 sections, in which i would like for when i'm in the second section the third one overlaps and adds an overlay over it. The thing is i can't seem to figure out how to make the scroll stop on the second section, meaning you'd scroll so the overlay starts to "fade" in while you stay in the same section. The explanation might be a bit confusing, so what I'm trying to do is what happens in this website https://burmester.pt/en/history/ when you reach the last section and overlay appears fadding in and it stays in the same section. I've read the docs over and over but i can't seem to figure out this issue, any help would be appreciated! Thanks in advance!