animation onload instead of onscroll

[superpositif]

div.image-bg must scale onscroll but is scaled onload. I don't understand why... Could you help me please ?

PS : there is an inverted scroll (with smooth-scrollbar.js)

See the Pen vYdNbNP by superpositif (@superpositif) on CodePen

[OSUblake]

19 minutes ago, superpositif said:

div.image-bg must scale onscroll but is scaled onload. I don't understand why... Could you help me please ?

 

You're scrolling to the end of the page, so it's going to trigger that animation. If you're trying to do everything in reverse, then you will probably have to manually control your animations in callbacks like onEnter, onEnterBack, onLeave, onLeaveBack to  with animation methods like play, pause, reverse, restart, etc.

 

You're question sounds pretty similar to this one, except it uses scrub, so it needs to use onUpdate instead of those other callbacks.

 

 

[superpositif]

OSUblake Thank you very much !   It's very interesting to do everything in reverse.

I tried but finally I need the animation to be scroll controlled. So I added scrub:1 (did it right?)
The result is not bad, however the image does not remain fixed at the bottom of the screen. What do you think ?

 

[OSUblake]

36 minutes ago, superpositif said:

The result is not bad, however the image does not remain fixed at the bottom of the screen.

 

Yeah, that's not possible because position: fixed will not work inside an element that is being transform, which is what happens with your scroll content. It's just a CSS thing.

 

https://stackoverflow.com/a/15256339/2760155

 

[superpositif]

damn... I need to calculate a new position onscroll, you think ?

[OSUblake]

Yeah, that's what I'm thinking. Kind of like how ScrollTrigger does pinning, but in reverse.

[superpositif]

Hum... I don't know how coding that... 

I need to code this page. All animations are onscroll

If  you are interested by this job, contact me.