[animation onload instead of onscroll]

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.
 

 

[animation onload instead of onscroll]

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

[animation onload instead of onscroll]

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 ?

 

[animation onload instead of onscroll]

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

[scrollTrigger + smoothscroll + responsive => vertical scroll to horizontal scroll]

OOOh cool ! Thank you very much @akapowl

it's perfect

[scrollTrigger + smoothscroll + responsive => vertical scroll to horizontal scroll]

Thanks @akapowl, thanks @iDad5 , thank you for your relevant feedback

 

I have modify my CSS and now I kill the smoothscroll.

 

Now : 

from wide window to small window = the horizontal scroll turn into a vertical scroll. Cool

from small window to wide window = I have an error in the console : 

ScrollTrigger.min.js:10 Uncaught TypeError: Cannot read property 'scrollWidth' of null
    at kb (ScrollTrigger.min.js:10)

 

my codepen is updated : 

[scrollTrigger + smoothscroll + responsive => vertical scroll to horizontal scroll]

Hi,

 

I try to use an horizontal scroll. I use smooth-scrollbar.js and gsap/scrollTrigger. It's very cool. 

I would like the horizontal scroll only for min-width > 1024px, and vertical scroll for max-width = 1024px

And i would like to switch horizontal<=>vertical on resize.

 

I use window.matchMedia 

But that doesn't work on resize.

from small window to wide window = the vertical scroll turns into a horizontal scroll.

from wide window to small window = the horizontal scroll does not turn into a vertical scroll.

 

I try to kill the scrollTrigger but not not sure that it is really essential.

 

 

How can I switch horizontal to vertical and vertical to horizontal, on resize, please ?

 

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