So, i found my problem. I changed the rootMargin “-200” by “0” in my script and it works now on my Iphone..

So, i just see that if i don’t use the script it works on small screen!
it seems that on screen under 400px large, the script don’t works…

here is my script:

<script>
function scrollTrigger(selector, options = {}){
    let els = document.querySelectorAll(selector)
    els = Array.from(els)
    els.forEach(el => {
        addObserver(el, options)
    })
}

function addObserver(el, options){
    if(!('IntersectionObserver' in window)){
        if(options.cb){
            options.cb(el)
        }else{
            entry.target.classList.add('active')
        }
        return
    }
    let observer = new IntersectionObserver((entries, observer) => { //this takes a callback function which receives two arguments: the elemts list and the observer instance
        entries.forEach(entry => {
            if(entry.isIntersecting){
                if(options.cb){
                    options.cb(el)
                }else{
                    entry.target.classList.add('active')
                }
                observer.unobserve(entry.target)
            }
        })
    }, options)
    observer.observe(el)
}
// Example usages:
scrollTrigger('.intro-text')

scrollTrigger('.scroll-reveal', {
    rootMargin: '-200px',
})

scrollTrigger('.loader', {
    rootMargin: '-200px',
    cb: function(el){
        el.innerText = 'Loading...'
        setTimeout(() => {
            el.innerText = 'Task Complete!'
        }, 1000)
    }
})
</script>

Hello,
yes, i told you that it start only when you arrive to this place.
So why when i put résolution at 400px large it works and 399 i can’t see anything?

and thanks for the child theme but i don’t want to use one.

Ok, so i can disable the plugin? And concerning the script? I saw that you did’nt put the script at the end of the file, is there a reason for that?

Hello,
Thanks a lot! it works now!
I have one question about the script: I dont have child theme and i use to keep modifications that i made in functiiuns.php in order to put it again when the file is updated.
I saw that you did’nt put the script at the end of the file, is there a reason for that?
Everytime i put modifications of functiuns.php at the end so it’s easyier for me to update it when it’s necesary.
As you see, I don’t understand so much about all of this…

Thanks for your answer!
And tanks again for your help!

Hello,
I didn’t know that i could disable classic editor…
Excuse me but it still the same..i clear all the cache, the browser and the litespeed cache. I even try it on Edge that i never use.
1- I open “https://vernissageduvar.com/nos-realisations/” the gap between the pictures is small and it’s what I want!

2- i click on “portes” and there is a big gap between the 2 rows.. i have to scroll at the top of the page to see the same i can see on “meubles” when i open the page!

If i stay on “portes” and i refeesh the page, the gap between the picture is small ang i have a big gap if i go on “meubles”..
i don’t understand!

and in fact i don’t need a script spécific for flex colums, I put 4 pictures in the middle of my page inside nothing just before the place i want to make my animation… i don’t now if it’s the good method…

Hello,
Nothing is working… when i arrive to the page, on “Meubles” there is a little space between the pictures.. it’s OK. then i click on “portes” and there is a big gap between pictures.. i have to scroll at the top of the page to reduce this gap and to have the same layyout that i have on “meubles” at the begining…

Hello,
I try the script again but it doesn’t works for me..

Thanks!!

Hello,
i don’t find how to close this post…

here is my page, it would be easier to explain

I try to change the size of the titles “meubles” and “portes”

Thanks!