[Highway.js and ScrollTrigger - Timeline doesn't restart when going back to the previous page]

@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.

On 2/18/2022 at 10:47 AM, OSUblake said:

You could put all your animations inside an array and then loop through that.

 

https://codesandbox.io/s/multiple-targets-forked-xy6niy?file=/src/index.js

 

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.

[Highway.js and ScrollTrigger - Timeline doesn't restart when going back to the previous page]

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.

[Highway.js and ScrollTrigger - Timeline doesn't restart when going back to the previous page]

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? 

[Highway.js and ScrollTrigger - Timeline doesn't restart when going back to the previous page]

@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

[Highway.js and ScrollTrigger - Timeline doesn't restart when going back to the previous page]

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

[Reverse a master timeline on click]

@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.

See the Pen KKyzmRZ by gardellimarius (@gardellimarius) on CodePen

[Reverse a master timeline on click]

@OSUblakeThanks a lot.

I managed to make it work using your code.

[Reverse a master timeline on click]

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?

See the Pen MWOyJKL by gardellimarius (@gardellimarius) on CodePen

[AirPods image sequence animation using ScrollTrigger]

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!

[AirPods image sequence animation using ScrollTrigger]

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

[AirPods image sequence animation using ScrollTrigger]

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:

See the Pen LYNRrJY by make96 (@make96) on CodePen

[AirPods image sequence animation using ScrollTrigger]

 

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.

See the Pen yLOaVpE by make96 (@make96) on CodePen

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.".

[AirPods image sequence animation using ScrollTrigger]

I'm trying to recreate Apple's Airpods Pro presentation page with ScrollTrigger.

This is what I'm trying to make: 

See the Pen ZEbGzyv by j-v-w (@j-v-w) on CodePen

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.

See the Pen poybrBd by make96 (@make96) on CodePen

[Combining scrub and batch for parallax]

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!

[Combining scrub and batch for parallax]

@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.

[Combining scrub and batch for parallax]

I created another CodePen.

Here you

See the Pen oNxgLbr by make96 (@make96) on CodePen

.

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.

[Combining scrub and batch for parallax]

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?

 

See the Pen XWdJbdR by make96 (@make96) on CodePen

[ScrollTrigger and prefers-colors-scheme bug]

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

 

[ScrollTrigger and prefers-colors-scheme bug]

@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.

[ScrollTrigger and prefers-colors-scheme bug]

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. 

See the Pen ExKYbgq by make96 (@make96) on CodePen

[Flash of content when using ScrollTrigger]

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.

 

[Flash of content when using ScrollTrigger]

@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? 

[Flash of content when using ScrollTrigger]

@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.

[Flash of content when using ScrollTrigger]

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.

See the Pen ExKYbgq by make96 (@make96) on CodePen

[Trying to animate pseudoclass - Cannot tween a null target]

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.

See the Pen MWWmaXZ by make96 (@make96) on CodePen