Help me to understand principe of data attribute (depth)

[PierreG]

Hi all

I am happy to make my first website with GSAP.

It is awesome but I encounter an issue (or not), so I need your clarification on how setting it up.

 

I have a website with multiple section ( from wordpress elementor).

Each section have absolute image in it. 

Each image depending on a data-depth parameter which is use to move on y axis each image.

what I want, if I set depth to 0, the image don't move and if I set depth to 1 I want the image to move exactly to the scroll speed.

As you can see in the codepen. 0 make the y to be inverted.

Example codepen

Any idea ? 

 

Also here is the full website I developp. As you can see (depend on hardware) it is very laggy. And when I stop scrolling sometimes the content continue to refresh for few milliseconds. 

 

https://www.dev.pierregagliardi.com/test/

 

Have a good day

 

Thanks

 

Pierre

 

 

 

 

See the Pen eYxyzNP by cchumi (@cchumi) on CodePen

[mvaneijgen]

Hi @PierreG welcome to the forum!

 

Let's remove ScrollTrigger from the setup, all it is doing is animating something on scroll, so if the animation doesn't work the ScrollTrigger will never work. I get that you want to get data from somewhere, but personally I always like to write my animation out by hand and worry about optimising later, this way I have a working animation I can reference when working on the dynamic version and it will be much easier to debug what the values are I need to get to what I'm getting right now. 

 

This is what your animation is doing right now. I have no idea what is should do, so it is hard for me to see what needs to be fixed to get it to do what you want, that is why a static version would be great.

 

The laggy-ness is because you're loading images that are 4,3mb* per image. When working on the web you should really reduce their size. For heavy images I'm always aiming between 300 - 500kb, your images are 8 times that!

 

See the Pen poGpExj?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[PierreG]

Hi @mvaneijgen thank you for your time. 

 

I understand that disable scrolltrigger will show my animation but my animation must be based on scrolltrigger.

 

Explanation : 

 

My section enter the viewport I want my BG to move very very slowly ( like 0.1 of scroll) and below layers to move faster based on the depth parameter. 

 

I found this function (CODEPEN UPDATED) :

 

y: function () {
        return (
          (1 - depth) *
          (ScrollTrigger.maxScroll(window) -
            (this.scrollTrigger ? this.scrollTrigger.start : 0))
        );
      },

which work very well for the first section but each next section have an increment behavior. 

 

It's like Scrolltrigger.maxScroll(window) and my calculation got an increased value in each next section.

 

You can take a look at my dev website. 

If you scroll down to last section (all sections are configured exactly the same for the BG) you will see that sections below the first accelerate the speed of Y.

 

https://www.dev.pierregagliardi.com/test/

 

Thanks

[mvaneijgen]

Sorry we can't debug a live website.

 

I get that you want your animation to happen on scroll, that is all fine. But you have to rethink your approach. All ScrollTrigger is doing is animating your animation on scroll, so as I stated earlier your ScrollTrigger can never work if you animation doesn't work first. You can't start running before you have learned to walk!

[mvaneijgen]

Here is a basic animation animating the layers up by X amount based on the index. 

 

See the Pen poGpExj?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

If that looks like the animation you want you can think about updating ScrollTrigger an see how that looks on scroll. I've placed some comments in the JS to explain certain parts. Hope it helps and happy tweening! 

 

See the Pen VwgybaV?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[PierreG]

Hi very good approach on the second pen. 

 

I need to know now how to get the correct ratio between my depth data attribute and the scroll. data-depth = 1 => move same speed as scrolll, data-depth=0 => not moving during scroll. 

 

 

Thanks a lot again

[mvaneijgen]

16 hours ago, PierreG said:

Hi very good approach on the second pen. 

Sorry, but please read this a few times, you have to understand this if you want to use ScrollTrigger. The last two pens I've shared are the same! The only thing that is different is that one has ScrollTrigger on and the other off. All ScrollTrigger is doing is animating your animation on scroll, nothing more!

 

Here a pen with your depth data from the current target with some random value, you will probably need to change to the current window height or something.  If you need further assistance please for the pen and show us what you've tried yourself, so that we can see your thought process and thus beter help you understand the tools. Hope it helps and happy tweening! 

 

See the Pen OJdzGwr?editors=0011 by mvaneijgen (@mvaneijgen) on CodePen

[PierreG]

Hi sorry for the delay.

 

A very very good thanks to point me in the right direction :). 

I use container height multiply by 2  then multiply by my depth dataset. It does the job slowing down animation.

 

Everything works as expected. I encounter issue on webit browser on ios where junky scroll behavior appear sometimes. I finally solve it by adding touch-action: none; in my css. 

 

 

Thanks a lot again