▼
Streaming live at 10am (PST)

Animation: infinite scroll

Design help Animations & Interactions
#1

Hello,

Im trying to create the landing page with the animation similar to the following website;

What I’m struggling with is to create infinite scroll of images.
(popping-out effect is not necessary, i only need scrolling effect.)

For now, I am tying to create this with Intaraction tool, but it’s hard to make the movement natural.
Im not familiar with Javascript script code, so if possible, I’d like to use Interaction only.
(but any tips with code embedding are also helpful )
Any helps or tips will be appriciated.

Thanks.

Here is my public share link: LINK
(how to access public share link)

#2

Make a seamless image, one that repeats when tiled.

Use it as a background image in a div. Give the div the class — or combo class — repeat.

Add a Custom Code box inside of the page (in the symbol navbar if you want the effects on all the pages of the site, for example).

Add this code in the box:

<style>

.repeat {
    animation-name: bgscroll2;
    animation-duration: 700s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: normal;
}

@keyframes bgscroll2 {
   from {background-position: 7680px 100%;}
   to {background-position:  0px 100%;} 
}

</style>

As you’ve used a Custom Code component inside of the page, you should see the effect right in the Designer, no Preview or Publish needed.

Tweak the code as you like.

1 Like
#3

Thank you for the quick and great solution.
Your code was so useful that I can easily change scrolling direction and speed.
Thank you for your huge help.