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.

I created another CodePen. Here you go. This is not an ideal solution, because if I add more h1.fade , the animations for the other elements will start as soon as the scroller-start-s2 bar will hit the top of the first h1.fade . It's best if you check them in a mobile view, because I'm always taking a mobile first approach in my prototypes.

Hello everybody! I've been experimenting with ScrollTrigger in the last few days and I'm wondering how can I create a parallax effect while scrolling for the h1 using ScrollTrigger.batch()? I know I can create a parallax effect if I add scrub:true , but it doesn't seem to work in this case. Is there a more elegant way of doing this instead of copy and pasting lines of code to every new div?

Indeed, your code is working if I slap it into an .html file. Even if I run my project in production, I get the same error. I'll have to look over my webpack config files and keep debugging. Edit: I fixed it! I scrapped all my SCSS code which was responsible for the dark mode and used html tags to switch images based on the color scheme. section picture(data-speed = '5') source(srcset='images/first-parallax-dark-mobile.png' media='(prefers-color-scheme: dark)') img(src='images/second-parallax-light-mobile.png') picture(data-speed = '-5') source(srcset='images/second-parallax-dark-mobile.png' media='(prefers-color-scheme: dark)') img(src='images/first-parallax-light-mobile.png') section

@ZachSaucier I edited my original post with two videos, so you can see what I'm talking about. The parallax effect is broken when I switch to a light color scheme in any browser, but that doesn't happen in CodePen.

I'm building a landing page which uses SrollTrigger for a parallax effect and the prefers-color-schemefor triggering dark mode. My code is working perfectly in the provided CodePen ( use a mobile view when checking the codepen link), but it doesn't in my browser. As you can see here, when I switch to light mode, my parallax effect is not functioning properly. I'm using the same version of GSAP ( 3.4.2 ) in CodePen and in my webpack folder.

I did a few little experiments, so I could narrow the problem. Testing this on my laptop ( it has a pretty weak config ) and a 1080p screen, everything is going smoothly, even Firefox's performance ( that flash is still present in Edge ). I added will-change: transform and rotation:0.01 , but it didn't improve the performance in Firefox. ( very choppy scrolling and animations on my main computer, which has an i5 - 6600k ). So, I decided to open the task manager and the results are suprising: scrolling in Edge or Chrome on my main computer gets the CPU usage up to 2-3%; scrolling in Firefox on my main computer gets the CPU usage up to 15%. CPU usage on my laptop always higher on Chrome, making the results are inconclusive.

@ZachSaucier Yes, I tried it on my iPhone, and everything is working as it's supposed to. Edit: I tried it on the desktop version of Chrome, and it seems to be fine. Looks like Microsoft Edge based on Chromium is the culprit. The performance on Firefox is pretty bad, do you have any tips on how can I improve that? Or do I need to manually mess up with the scrolling behavior in the config of the browser?

@ZachSaucier Thank you for tightening up my code! Yes, the same flash occurs in the CodePen. I don't have anything else on my page. I thought my problem was caused because I was using big *.png files, but I coverted all my images to the *.webp format, but I didn't see any changes.

I'm trying to create a landing page which uses parallax, but for some reason there is a flash of unstyled content when I scroll. I looked over the documentation and it's being suggested to use anticipatePin: 1, but that doesn't fix it in my scenario.

Hi all, I'm trying to make animation in which the :before pseudo-class of the box is being scaled down when I click that button, but I can't seem to be able to do that. :before renders correctly, is there any way to make this work? If I place it on the .main-page div, it's working, but that's not what I'm looking for. The codepen link is the barebones version of what I'm trying to achieve.