Terio

Here is my website: https://teriodev.github.io/teriotats/ Everything works as intended - animation play on enter and refresh, they also play on a subpage after pressing the book button on the top. The problem is, when you try to go back to the index page, animations won't load. The page is left in it's previous finished state. How can I fixed that and what causes this problem?

Yes I was able to fix it! Sorry for not notifying earlier, I was staying up late to sort this out

@Cassie This is what I have so far. It's simplified a lot, but I hope it conveys what I'm trying to do. I've been working on it since adding this post and it almost works. To clarify - the grid div zooms in when one of the columns is scrolled, but comes back to its initial state after checking that both columns are scrolled to the top. There shouldn't be a situation where one column is scrolled down and the div shrinks. Right now, the left column expands and shrinks the div, but the right one doesn't seem to have any effect on it The left column can shrink the div even when the right one is scrolled down which shouldn't be the case. https://codepen.io/terramsc/pen/rNdeOQM

Hello, I've been learning about gsap for a little and just started with ScrollTrigger plugin. It works great for me, but I stumbled upon something I'm not able to sort out. I have a grid with two columns. When you scroll one of the columns, the whole grid zooms in. That works fine. What I can't do, is to zoom out the grid to its default position only if both of these columns are scrolled to the top. On page load div is zoomed out Left column - scrolled, right column - initial => zoom in Left column - initial, right column - scrolled => zoom in Only zoom out if: left column - initial, right column - initial I'm sorry, but I'm not able to post the code here as it's complicated and it has elements I would have to upload to a hosting server. Here is how the design looks like: Here is my code: // EXPAND TIMELINE var expand = gsap.timeline({}); expand.to(".book-window", {border: 0, borderRadius: 0, duration: 0.5, width: "100vw", height: "100vh", margin: 0, padding: 0, bottom: 0}, 0) expand.to(".info", {borderRadius: 0}, 0) expand.to(".form", {borderRadius: 0}, 0) // EXPAND BOOK WINDOW // media query const outputElement = document.getElementById("info"); // for less than x px const smallDevice = window.matchMedia("(min-width: 800px)"); smallDevice.addListener(handleDeviceChange); // expand functions function handleDeviceChange(e) { if (e.matches) { ScrollTrigger.create({ scroller: '.info', animation: expand, trigger: ".info-header", start: "top top", toggleActions: "play none none reverse", markers: true }) ScrollTrigger.create({ scroller: '.form', animation: expand, trigger: ".form", start: "top top", toggleActions: "play none none reverse", markers: true }) } else { ScrollTrigger.create({ scroller: '.book-window', animation: expand, trigger: ".info-header", start: "top top", toggleActions: "play none none reverse", markers: true }) } }

That's it! Thank you so much. I'm annualizing that code and there are some new approaches there I didn't know about before. It's interesting, I will try to work with them in the future.

Hello. I have started to learn JS few weeks ago and I found this amazing library yesterday. I decided I want to achieve a designed project with it. However, I've been reading resources on this website and reading forum posts, but after hours I still can fix it. Therefore I'm asking here for help. The project is a bit complicated, but I'm hyped about it and that's the way I really want it to work. I think what explains it best is this graph I've prepared for this post: I almost achieved this, but I have some problems. After finishing step 4, the animation is broken and reversed in an improper order. Could anyone please try to help me fix my code? Please keep in mind I'm new to this. Thank you all in advance.