marius96

@OSUblake I'm having trouble creating a CodeSandbox. In my webpack-dev-server I have a different error compared to the one in CodeSandbox, which is strange because I have the exact same code. Basically what I'm saying, in your solution the timeline doesn't get killed when you click to go to another page. If you are on index and you scroll down, the timeline triggers. When you go to page.html the timeline doesn't get killed. If you go back to index.html from page.html and you scroll to where the target element is, the timeline doesn't start.

I combined both of your solutions, but I still can't get it to work. @_Greg _ @OSUblake The code works for removing the scrollTrigger timeline in the out method, but as soon as I add targets.forEach((target, index) => { if(target) { tl[index] = gsap.to(target, { x: 100, scrollTrigger: { trigger: target, markers: true, start: "bottom center" } }); } }); to the in method, the timeline doesn't get killed anymore. @OSUblake I think I'm having the same issue as you in the last CodePen you posted. Edit: Yeah, I think something in the in method isn't working properly because if I load /page.html first and I click on the anchor tag to go to index.html, my tl isn't created.

Sorry for the late response @OSUblake Yes, that's exactly what I wanted to achieve. However, I still ran into some problems. How do I kill a timeline if I have multiple ScrollTrigger targets? I get the error that tl is not defined https://codesandbox.io/s/multiple-targets-t5ostg Is there a way to iterate through all the targets and kill the timeline?

@OSUblake Thanks for the feedback. I removed the vl.restart() and added the whole timeline again. Now it's working, but there's something going wrong as it doesn't remove the current timeline when I leave the page. In the out method, which handles the leaving animation, I'm using vl.kill(). Am I referencing this the wrong way? Like, If I go back to index, the triggers from the page.html are still there, and I'm expecting them to get killed. https://codesandbox.io/s/highwayjs-gsap-scrolltrigger-r2kec?file=/src/index.js:328-347

I'm trying to create an animation with Highway.js and ScrollTrigger, but for some reason the ScrollTrigger timeline stops working after I come back to the index page. The other gsap related code works fine, only the ScrollTrigger part is buggy. I've seen some suggestions like this: killing the timeline when I leave the page and then restart it when I go back. I did that, but it still won't work properly. Note: you have to refresh the Codesandbox browser when you open the link in order to trigger the timeline. I think this is a bug, as this part is working fine on my webpack-dev-server. Here's a link with minimal code: https://codesandbox.io/s/highwayjs-gsap-scrolltrigger-r2kec

@OSUblake I'm sorry for double posting, but I have one more question. I added a text div to your example, which fades in when the animation completes. How can I reverse that as well? I tried using onReverseComplete, but doesn't seem to help. https://codepen.io/gardellimarius/pen/KKyzmRZ

@OSUblakeThanks a lot. I managed to make it work using your code.

I'm trying to create a carousel which shows a box with information when I click on the button. The animation which fades in '.splide__slide__content' works on my computer, but doesn't work on CodePen, but that's not the main problem. What I'm trying to do is to reverse the master timeline when I click on the button again, so it fades out. Can somebody help out?

Yes, that's what I was trying to do. I'm sorry, I misunderstood how match media works. I thought, when the mobile viwerport would get triggered, the code in all section would not run and would get replaced by the mobile viewport code. Thanks again!

Nobody has any idea on how can I fix this for mobile devices?

Thanks a lot for your suggestions. I tested @OSUblake your first two examples and, ideed, they are working. Sadly, there are quite a few problems: Microsoft Edge has a weird problem where if I start scrolling back up from the end to the top, it shows one random image and then suddenly starts the sprite process. I tested quite a ton of grids for mobile, and the webpage can't properly load up. I'm sure this is because the file is too large or the grid is too big for mobile. @ZachSaucier I'm afraid I don't understand your code without seeing a CodePen. @OSUblake Your last Pen is the best solution so far. It works across every browser, the performance of mobile is great and I don't have to play around too much with media queries to optimize this on mobile. Sadly, I've encountered other problem. Apple's way of fading in and fading out is pretty neat: immediately after first text element finishes fading out, the second element starts to fade in. I managed to do that on desktop, but on mobile I can't do it. I'm using ScrollTrigger.matchMedia to achieve the desired animation on mobile, but it doesn't work. If I replace end: "bottom top" with end: "bottom -50%" in the all : function() { } , the effect works on mobile, but If I replace it in the "(max-width: 799px)" : function() { } , it doesn't. I think I'm doing something wrong with the media queries. scrollTrigger: { trigger: target, markers: true, scrub: true, start: "center 50%", end: "bottom top", pin: true } Here is a new Pen: https://codepen.io/make96/pen/LYNRrJY

Thank you for responding, @ZachSaucier. Sorry for the late response, but after a few tries I think I started to get the hang of this. https://codepen.io/make96/pen/yLOaVpE As @sbest58 said in this topic, this is a process that takes a lot of trial and error. For desktop, the sweet spot for me is 15 rows and 10 columns for a total of 147 images. Testing this on my iPhones, it crashes, so I think I need to create a new grid. Switching from png to webp did wonders, the hero-section image file went from 21mb to around 4mb. The Codepen link provided by me, has a .png file since imgur doesn't support .webp I have a few questions: If you check Apple's page, they are doing some sort of scaling with the images when you start scrolling: is this possible with sprites? I want to split this into a few sections because if I create only one image grid with all the images, that image will take forever to load. I tried copying and pasting code for the second section, but that doesn't work. Can explain to me how can I create a new section? I tried of copying and pasting that code for every new section, with the trigger modified accordingly, but that doesn't work. And the last question, how can I do what Apple does animate their text: translate - fade in - translate - fade out the text in a pinned section? I'm referring to the "Active Noise Cancellation for immersive sound.".

I'm trying to recreate Apple's Airpods Pro presentation page with ScrollTrigger. This is what I'm trying to make: https://codepen.io/j-v-w/pen/ZEbGzyv My idea is to use an array which holds all the images and then make use of ScrollTrigger.update() to update the img src based on the scrolling position.

You've helped me with a ton of stuff these days, I'm struggling a lot with the documentation when I'm learning new things. Thank you again!

@ZachSaucier Yes, I want to fade in and and translateY every heading when they come into view, but I don't want that animation to end as soon as the headings come into view, I want to animation to be controlled by scrolling. That's the main difference between the two CodePens, don't look at the code, just compare the two results and you'll spot the differences.