Lateral movement on scrolling

How To
1

I need to move an icon or image lateral on scrolling, I give a look on
INTERACTION > SCROLL

but in Action or Animation I can’t found a lateral movement or something similar.

how can i obtain this?
thanks

2

Hi Fulvio,
This requires a Javascript scroll trigger solution: js animation on scroll - Google Search

Some of the third party bricks plugins already included this, so maybe it’s worth taking a look at their feature sets:

Best,
timmse

1 Like
3

thanks @timmse
yes i knew it could be done with js, but i thought there was a bricks function.

thanks for the answer, do you know which extension (n the directory) includes this function??
thanks

4

No, not specifically. Click through the websites, and you’ll be sure to find what you’re looking for. Alternatively, there is motion.page, which specializes in animations and is used on some websites built with Bricks, as far as I know: https://motion.page/

5

I don’t want to use a plugin for a simple lateral movement, this weighs down the site unnecessarily
I tried with this code but it doesn’t work, any solutions???

first i give to my image the name id

#space-invaders

add this CSS

%root% {
    position: relative;
    right: 40%;
    top: 50px;
    transition: transform 0.3s ease-in-out;
}

and add this java:


// Posizione di scroll precedente
let lastScrollTop = 0; 
// Seleziona l'immagine
const image = document.getElementById('space-invaders'); 

// Ottieni la posizione iniziale dell'immagine
const initialPosition = window.getComputedStyle(image).getPropertyValue('right');
// Valore iniziale in pixel
const initialValue = parseFloat(initialPosition) || 0; 

window.addEventListener('scroll', function() {
  // Ottieni la posizione attuale dello scroll
  let scrollTop = window.pageYOffset || document.documentElement.scrollTop;

  if (scrollTop > lastScrollTop) {
    // Scroll down
    image.style.transform = `translateX(${Math.min(scrollTop, 200) + initialValue}px)`; // Muovi a destra
  } else {
    // Scroll up
    image.style.transform = `translateX(${-Math.min(scrollTop, 200) + initialValue}px)`; // Muovi a sinistra
  }
  // Aggiorna la posizione di scroll precedente
  lastScrollTop = scrollTop <= 0 ? 0 : scrollTop; 
});

byt no way to obtain what i need